JavaScript表单开发中通过form名称访问.value属性触发undefined报错

• 直接裸写regForm访问表单的写法不兼容现代浏览器：这种写法是早期IE怪异模式的遗留行为，现代浏览器默认不会将带name属性的DOM元素自动挂载到全局window对象下，因此代码运行时regForm本身就是undefined，尝试读取/赋值它的属性就会触发"无法为undefined设置属性"的报错。
• 表单控件未配置name属性：通过表单对象直接访问内部控件的规则，是优先匹配控件的name属性，你的输入框只配置了id没有配置name，即便正确拿到表单对象，也无法通过regForm.firstName找到对应输入框。
• 结果展示标签用法错误：<p>是普通文本标签，不属于表单控件，不存在value属性，直接给它的value赋值不会在页面上渲染任何内容。

按照课程要求保留"通过表单名访问元素"的实现逻辑，只需要做三处调整：

1. 使用标准API document.forms.表单名 获取表单对象，这是所有浏览器都支持的、通过name属性访问表单的规范写法，不存在全局变量找不到的问题。
2. 给名字输入框补上name="firstName"属性，让表单可以直接索引到该控件，正常读取输入的value。
3. 调整结果赋值逻辑：拿到表单对象后，在表单范围内查找p标签，给它的文本属性赋值，不要用不存在的value属性。

修复后的完整代码如下：

HTML部分 #

<form name="regForm">
    <table>
        <tr> <!-- First Name -->
            <td>
                <input name="firstName" id="firstName" type="text" placeholder="First Name">
            </td>
        </tr>
        <tr> <!-- Result Box -->
            <td>
                <p id="returnOutput"></p>
            </td>
        </tr>
        <tr> <!-- Submit button -->
            <td>
                <button type="button" onclick="validateForm()">Sign Up</button>
            </td>
        </tr>
    </table>
</form>

JavaScript部分 #

function validateForm() {
    // 通过标准的forms集合按name获取表单
    const regForm = document.forms.regForm;
    // 访问带name属性的输入框，读取输入值
    const firstName = regForm.firstName.value;
    // 在表单范围内找到p标签，设置文本内容
    regForm.querySelector('#returnOutput').textContent = firstName;
}

注：上述实现没有直接使用document.getElementById()获取元素，所有元素查找都基于拿到的表单对象完成，符合课程考核的要求。

内容的提问来源于stack exchange，提问作者Syphre00