本文讲解为何在页面加载时提前读取 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。

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

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

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 放在