JavaScript中变量num1为何无法正确获取输入框的值？

嘿，这个问题的核心是你给num1赋值的时机太早了，我给你拆解一下：

先看你的代码片段：

var textboxnumber1 = document.querySelector('.number1'); 
var textboxnumber2 = document.querySelector('.number2'); 
var calcbutton = document.querySelector('.calcbutton'); 
// 这里！页面刚加载就把输入框的值赋给num1了
var num1 = Number(textboxnumber1.value); 
var num2 = Number(textboxnumber2.value); 
function writenumbers() { 
    window.alert(num1); 
} 
calcbutton.addEventListener('click', writenumbers);

当页面首次加载完成时，你的输入框.number1里是空的对吧？Number("")的结果就是0，所以num1从一开始就被钉死成0了。之后不管你在输入框里输入什么数字，这个变量都不会自动更新——因为它只在页面加载那一瞬间被赋值了一次，之后就跟输入框的实时状态脱节了。

而当你改成window.alert(Number(textboxnumber1.value))时，是每次点击按钮的瞬间，才去读取输入框当前的内容，这时候拿到的就是你刚输入的最新值，所以能正常显示。

怎么改？ #

把获取输入值的逻辑挪到点击事件的回调函数里，这样每次点击按钮都会重新读取输入框的实时值：

var textboxnumber1 = document.querySelector('.number1'); 
var textboxnumber2 = document.querySelector('.number2'); 
var calcbutton = document.querySelector('.calcbutton'); 

function writenumbers() { 
    // 每次点击时才获取最新输入值
    var num1 = Number(textboxnumber1.value); 
    var num2 = Number(textboxnumber2.value); 
    window.alert(num1); 
} 

calcbutton.addEventListener('click', writenumbers);

要是你需要在其他函数里也用到num1/num2，也可以先声明变量，在点击时更新：

var textboxnumber1 = document.querySelector('.number1'); 
var textboxnumber2 = document.querySelector('.number2'); 
var calcbutton = document.querySelector('.calcbutton'); 
var num1, num2; // 先声明，不赋值

function writenumbers() { 
    // 点击时更新变量为当前输入值
    num1 = Number(textboxnumber1.value); 
    num2 = Number(textboxnumber2.value); 
    window.alert(num1); 
} 

calcbutton.addEventListener('click', writenumbers);

这样就解决问题啦～

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