本文详解为何在页面加载时就获取输入框值会导致计算结果为 nan，并提供正确做法：将 `parsefloat()` 调用移至事件处理函数内部，确保每次点击时动态读取最新用户输入。
在 JavaScript 表单计算中，一个常见却隐蔽的错误是：在脚本初始化阶段（即页面加载时）就获取并解析输入框的值。你的原始代码中：
let a = parseFloat(document.getElementById("num1").value); // ❌ 页面加载时执行
let b = parseFloat(document.getElementById("num2").value); // ❌ 此时 input 为空 → NaN由于 HTML 文件中 <script src="interaction-simple.js" defer></script> 是延迟加载的，但仍在 DOM 解析完成后立即执行——此时用户尚未输入任何内容，document.getElementById("num1").value 返回空字符串 ""，而 parseFloat("") 的结果是 NaN（Not-a-Number）。后续无论用户输入什么，a 和 b 的值都不会更新，因此 getSum() 每次计算的都是 NaN + NaN = NaN。
✅ 正确做法是：将值的读取与解析逻辑完全移入事件处理函数中，确保每次点击按钮时都实时获取当前输入内容：
const answerBtn = document.getElementById("answerBtn"); // ✅ 先获取按钮元素（需确保 DOM 已就绪）
function getSum() {
const inputA = document.getElementById("num1").value;
const inputB = document.getElementById("num2").value;
const a = parseFloat(inputA) || 0; // ✅ 提供默认值防 NaN；也可用 isNaN() 做校验
const b = parseFloat(inputB) || 0;
const sum = a + b;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 answerBtn 变量已正确定义（原代码中未声明，需补充 const answerBtn = document.getElementById("answerBtn");）；
- 使用 || 0 可将 NaN 安全转为 0，提升健壮性（如用户输入非数字时不至于中断）；
- 若需严格校验，可增加判断：
if (isNaN(a) || isNaN(b)) { alert("请输入有效数字！"); return; } - 推荐为 <input> 添加 type="number" 属性（视觉+基础约束），但不可替代 JS 校验，因用户仍可通过粘贴或开发者工具绕过。
? 总结：DOM 输入值具有时效性，所有依赖用户输入的计算逻辑，必须在交互触发时（如 click、input 事件）动态读取，而非在初始化阶段“快照”一次。这是避免 NaN、undefined 等意外输出的核心原则。
