如何解决 JavaScript 中输入值读取为 NaN 的问题

本文讲解为何在页面加载时提前读取 input 元素的 value 会导致计算结果为 nan，并提供正确获取用户实时输入值的方法，确保加法运算正常执行。

在你提供的代码中，问题根源在于变量 a 和 b 的声明位置：它们被定义在脚本顶层（即全局作用域），在页面刚加载、用户尚未输入任何内容时就立即执行了 document.getElementById(“num1”).value 和 document.getElementById(“num2”).value。此时两个 input 字段为空字符串 “”，而 parseFloat(“”) 返回 NaN（Not-a-number）。后续无论用户输入什么，a 和 b 的值都不会更新，因此点击按钮时 sum = NaN + NaN，最终输出仍是 NaN。

✅ 正确做法是：将输入值的读取操作移入事件处理函数内部，确保每次点击按钮时都实时获取当前输入内容：

const answerBtn = document.getElementById("answerBtn"); // 注意：需先获取 button 元素  function getSum() {   const a = parseFloat(document.getElementById("num1").value) || 0;   const b = parseFloat(document.getElementById("num2").value) || 0;   const sum = a + b;   document.getElementById("output").value = sum; }  answerBtn.addEventListener('click', getSum);

⚠️ 补充注意事项：

• 必须确保 answerBtn 元素已存在再绑定事件——推荐使用 defer（如你已在 html 中所做）或把 script 放在