使用模板字面量在HTML展示JS数据时元素显示undefined的解决方法

你遇到的undefined问题主要是代码里几个关键逻辑没处理对，我帮你拆解下问题并修正：

原代码里的核心问题 #

• 你在initForm里直接用this.name和this.shapeSelect，但这两个属性根本没在你的对象里定义，this在这里指向的是返回的ShapeLink对象，自然拿不到表单的值
• 获取表单值的代码写得不对：document.getElementById('name').name拿的是输入框的name属性，不是用户输入的内容；document.getElementById('shapeSelect').option也不是获取选中项值的正确方式
• 更新outputText的代码写在了submit事件监听外面，页面一加载就执行了，这时候用户还没输入内容，肯定是undefined
• 表单提交没有阻止默认行为，页面会直接刷新，你根本看不到结果

修正后的代码 #

let ShapeLink = (function(){ 
    return { 
        initForm: function(frm){ 
            frm.addEventListener('submit', function(e){ 
                // 阻止表单默认提交行为，避免页面刷新
                e.preventDefault();
                
                // 获取用户输入的名称和选中的图形
                const userName = document.getElementById('name').value;
                const selectedShape = document.getElementById('shapeSelect').value;
                
                // 用模板字面量更新页面显示
                document.getElementById('outputText').innerHTML = `${userName} wants to see a ${selectedShape}`;
            });
        }
    }
})();

// 记得调用initForm初始化表单，比如页面加载后：
// document.addEventListener('DOMContentLoaded', function() {
//     ShapeLink.initForm(document.getElementById('your-form-id'));
// });

关键修正点说明 #

1. 阻止默认提交：用e.preventDefault()避免表单提交后页面刷新，这样才能看到更新后的内容
2. 正确获取表单值：
   • 输入框的值用.value获取，而不是.name
   • 下拉框选中项的值用.value获取，这是标准的方式
3. 把更新逻辑放在事件内部：只有用户提交表单时才去获取值并更新页面，这样就不会出现页面加载时的undefined
4. 变量命名更清晰：用userName和selectedShape代替模糊的命名，代码可读性更好

这样修改后，当用户填写名称、选择图形并提交表单时，outputText元素就能正确显示内容啦~

内容的提问来源于stack exchange，提问作者J.Morris