JS表单验证项目中获取input值打印为undefined是什么原因？

问题成因 #

核心原因是触发了JavaScript全局作用域的命名冲突：
name是浏览器window对象的内置全局属性，默认类型为字符串，无法被直接覆盖为DOM元素对象。
你在全局作用域使用var name = document.getElementById('name')赋值时，系统会自动把你传入的DOM元素转为字符串"[object HTMLInputElement]"存入window.name，而非保留DOM对象引用。后续在empty函数中未加声明关键字直接修改name，依然是在操作全局的字符串类型window.name，字符串不存在value属性，因此打印结果为undefined。
额外说明：你尝试取innerText也无法得到结果的原因是，input为单标签元素，用户输入的内容本身就存储在value属性中，innerText用于获取双标签包裹的文本内容，对input元素本身就不生效。

解决方法 #

提供三种可行的修复方案，任选其一即可：

• 方案1：重命名冲突变量，避免使用name作为全局变量名，同时移除函数内重复获取DOM的冗余代码

// 将变量名修改为不冲突的名称
var nameInput = document.getElementById('name');
var email = document.querySelector('.email');
var password = document.querySelector('.password');
var btn = document.getElementsByClassName('btn')[0];

btn.onclick = empty;

function empty() {
    console.log(nameInput.value);
    if(nameInput.value == "") {
        nameInput.classList.add('errInp');
    }
}

• 方案2：将所有逻辑放入局部作用域，避免污染全局变量

// 使用立即执行函数形成局部作用域
(function(){
    var name = document.getElementById('name');
    var email = document.querySelector('.email');
    var password = document.querySelector('.password');
    var btn = document.getElementsByClassName('btn')[0];

    btn.onclick = empty;

    function empty() {
        console.log(name.value);
        if(name.value == "") {
            name.classList.add('errInp');
        }
    }
})()

• 方案3：现代浏览器环境下使用let/const代替var声明变量，let/const声明的全局变量不会挂载到window对象上，天然避免和内置属性冲突

// 把var替换为const
const name = document.getElementById('name');
const email = document.querySelector('.email');
const password = document.querySelector('.password');
const btn = document.getElementsByClassName('btn')[0];

btn.onclick = empty;

function empty() {
    console.log(name.value);
    if(name.value == "") {
        name.classList.add('errInp');
    }
}

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