本文讲解为何在页面加载时提前读取 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 放在 </body> 前；
- 使用 || 0 可将空值、非法字符串（如 "abc"）安全转为 0，避免 NaN 传播；若需严格校验，可增加 isNaN() 判断并提示用户；
- parseFloat() 会忽略前导空格并截断尾部非数字字符（如 "12.34px" → 12.34），如需整数可用 parseInt(value, 10)，或更严谨地用 Number(value) 配合 Number.isFinite() 校验。
总结：JavaScript 表单交互的核心原则是——值读取时机决定数据有效性。永远在用户触发行为（如点击、提交）的瞬间读取 DOM 值，而非在初始化阶段静态捕获，这是避免 undefined、""、NaN 等常见错误的关键实践。
立即学习“Java免费学习笔记（深入）”；
