JavaScript输入读取异常：输入数字返回NaN，请求排查原因

核心原因 #

你代码里的var first = parseInt(document.getElementById('numb').value, 10);是在页面加载完成时执行的，这时候输入框还没有任何输入内容，value是空字符串，parseInt("", 10)自然返回NaN。而且点击按钮的multiply函数里只是打印这个一开始就固定的first变量，并没有重新读取输入框的最新值，所以不管之后输入什么，结果都不会变。

修正后的代码 #

把获取输入框值的逻辑放到点击事件的函数内部，这样每次点击按钮时都会读取当前输入框的最新内容：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" id="mult">Submit</button>

<p id="demo"></p>

<script>

document.getElementById('mult').addEventListener('click', multiply);

function multiply() {
    // 每次点击时读取最新的输入值
    var first = parseInt(document.getElementById('numb').value, 10);
    console.log(first);
}

</script>
</body>
</html>

额外说明 #

• 如果要处理输入非数字的情况，可以添加判断逻辑：

  function multiply() {
      var inputVal = document.getElementById('numb').value;
      var first = parseInt(inputVal, 10);
      if (isNaN(first)) {
          console.log("请输入有效的数字");
      } else {
          console.log(first);
      }
  }
  

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