本文详解为何在页面加载时提前读取输入框值会导致 nan 输出，并提供正确的事件驱动获取方式，确保数值计算准确可靠。
在 JavaScript 表单计算中，一个常见却容易被忽视的错误是：在页面加载时（而非用户触发操作时）就尝试读取 元素的 .value。你的原始代码中：
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);这两行在脚本执行初期（即 HTML 加载完成、但用户尚未输入任何内容时）就被运行。此时 #num1 和 #num2 的值为空字符串 ""，parseFloat("") 返回 NaN，后续 NaN + 任何数 仍为 NaN——因此点击按钮后输出始终是 NaN。
✅ 正确做法是：将输入值的读取和解析逻辑移入事件处理函数内部，确保每次点击都实时获取最新用户输入：
const answerBtn = document.getElementById("answerBtn"); // 注意：需先获取按钮元素
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);? 关键改进说明：
立即学习“Java免费学习笔记（深入）”；
- || 0 提供安全默认值，避免 NaN 传播（例如用户输入非数字时 parseFloat("abc") 返回 NaN，NaN || 0 得 0）；
- 所有 DOM 查询和数值解析均在 getSum() 调用时动态执行，严格绑定用户交互时机；
- 确保 answerBtn 元素已存在——建议在
? 进阶提示：如需更强健性，可增加输入校验：
function getSum() {
const inputA = document.getElementById("num1").value.trim();
const inputB = document.getElementById("num2").value.trim();
if (!inputA || !inputB) {
alert("请输入两个有效数字！");
return;
}
const a = parseFloat(inputA);
const b = parseFloat(inputB);
if (isNaN(a) || isNaN(b)) {
alert("输入包含无效数字，请检查！");
return;
}
document.getElementById("output").value = (a + b).toString();
}总结：永远不要在初始化阶段读取用户尚未输入的表单值；将数据获取延迟至事件触发时刻，是保证前端交互逻辑正确性的基本准则。
