关于getElementById获取number输入框value值两种方式结果不一致的技术咨询

这问题本质是变量存储的内容和赋值时机搞的鬼，我给你拆解清楚：

第一种方式的问题所在 #

当你执行const number = document.getElementById("number").value;时，这行代码是在页面刚加载完成就立刻运行的。此时用户还没在输入框里填任何内容，输入框的value属性是空字符串""——这个空字符串被直接存在了number变量里。

关键来了：number变量存的是一个固定的静态值，后续不管用户在输入框里输入什么数字，number的内容都不会自动更新。所以当你点击按钮执行parseInt(number)时，本质是在转换空字符串""，而parseInt("")的结果就是NaN，这就是你看到的错误输出。

第二种方式为什么正确 #

而const numberCorrect = document.getElementById("number");这行代码，存的不是输入框的value值，而是输入框这个DOM元素的引用。当用户点击按钮时，你通过numberCorrect.value去取值，这时候取的是点击瞬间输入框的最新内容——也就是用户刚输入的数字字符串，用parseInt转换自然就能得到正确的数值。

额外的验证小技巧 #

你可以在代码里加个日志验证一下：

const number = document.getElementById("number").value;
console.log("页面加载时的number值:", number); // 控制台会输出空字符串""
const numberCorrect = document.getElementById("number");
const calculateInput = document.getElementById("calculate");
calculateInput.addEventListener("click", function() {
  console.log("点击时的number值:", number); // 还是空字符串""
  console.log("点击时输入框的最新value:", numberCorrect.value); // 是用户输入的内容
  let numb = parseInt(number);
  let numbCorrect = parseInt(numberCorrect.value);
  console.log(numb); // NaN
  console.log(numbCorrect); // 正确数值
})

看了日志你就能直观感受到两者的区别了。

另一种可行的写法 #

其实你也可以不用提前存DOM元素，直接在点击事件里实时获取输入框的value，效果是一样的：

const calculateInput = document.getElementById("calculate");
calculateInput.addEventListener("click", function() {
  let numb = parseInt(document.getElementById("number").value);
  console.log(numb); // 同样能得到正确数值
})

总结一下：如果需要获取用户操作后的最新数据，一定要在操作触发的时机去读取对应的属性，而不是提前把当时的静态值存起来——毕竟用户输入是动态变化的，静态值可不会自己跟着变~

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