如何从<input type="number">获取值并在脚本中使用？现有代码返回NaN

核心问题 #

你的代码有三个关键错误导致弹窗显示NaN：

1. 脚本在<head>中执行时，<body>里的<input>元素还未被浏览器渲染，document.getElementById('input1')返回null，parseInt(null)结果就是NaN。
2. 就算元素已加载，你直接对DOM元素调用parseInt，而不是获取元素的value属性，这也会导致解析失败。
3. val1在页面初始化时就被赋值，后续用户输入的内容不会自动更新这个变量，必须在点击按钮时重新获取输入值。

修复后的基础版代码 #

<html>
<head>
    <title>title</title>
</head>
<body>
    <br>
    <input type="number" id="input1"/>
    <br>
    <button type="button" onclick="bytton()">value of val1</button>

    <script>
        function bytton() {
            // 点击按钮时才获取输入框元素，并读取其value属性
            var inputElement = document.getElementById('input1');
            var val1 = parseInt(inputElement.value);
            window.alert(val1);
        }
    </script>
</body>
</html>

额外优化建议 #

• 给parseInt添加第二个参数（基数10），避免进制解析异常：parseInt(inputElement.value, 10)
• 增加输入合法性判断，提升用户体验：

  function bytton() {
      var inputElement = document.getElementById('input1');
      var inputValue = inputElement.value.trim();
      if (inputValue === '') {
          window.alert('请输入数字');
          return;
      }
      var val1 = parseInt(inputValue, 10);
      if (isNaN(val1)) {
          window.alert('请输入有效的数字');
          return;
      }
      window.alert(val1);
  }
  

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