JS中input值赋值变量返回undefined/空值问题求助

嘿，我来帮你捋清楚这个问题的根源和解决办法～

核心问题：变量赋值的时机不对 #

你现在的代码是在页面刚加载完成时就执行了var nameInp = document.getElementById('name').value;，这时候用户还没在输入框里输入任何内容，所以nameInp存储的从一开始就是空字符串。等你点击按钮调用check()函数时，打印的只是之前提前存好的空值，根本不是用户输入后的最新内容。

另外，你一开始用name作为变量名时出现问题，是因为浏览器的全局对象（window）自带了一个name属性（用来存储窗口名称），用var name声明变量会和这个内置属性冲突，它会强制把值转成字符串，还会有各种奇怪的行为，所以绝对不要用name作为全局变量名！

两种有效解决方法 #

方法1：在函数内部实时获取最新值 #

每次点击按钮时，再去读取输入框的当前值，这样就能拿到用户输入的内容了：

var btn = document.getElementById('submit');
function check(){
  // 每次调用函数时才获取最新的输入值
  var nameInp = document.getElementById('name').value;
  console.log(nameInp);
}

方法2：存储元素引用，按需读取value #

如果想保留全局变量，可以只存储输入框的DOM元素引用，而不是提前读取value，在需要的时候再获取它的当前值：

// 只存储DOM元素，不提前取value
var nameInp = document.getElementById('name');
var btn = document.getElementById('submit');
function check(){
  // 每次调用都读取当前的value
  console.log(nameInp.value);
}

补充说明 #

你说直接在控制台执行console.log(document.getElementById('name').value)能正常获取值，是因为你执行这段代码的时候，已经在输入框里输入内容了，这时候读取的是当前的实时值，和你页面加载时就执行赋值的逻辑完全不同。

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