本文详解 html + javascript 简易计算器中因 dom 获取方式不当和类型转换缺失导致的 nan 错误，并提供可直接运行的修正方案。
在构建基础 HTML 计算器时，一个常见却容易被忽视的问题是：点击按钮后结果显示为 NaN（Not-a-Number）。这并非逻辑错误，而是源于两个关键环节的疏漏——DOM 元素获取方式不准确与输入值未进行数值类型转换。
首先，document.getElementsByName('One') 返回的是一个 HTMLCollection（类数组对象），而非单个元素。即使页面中只有一个 name="One" 的输入框，你也必须通过索引 [0] 显式访问它，否则 .value 会作用于整个集合，返回 undefined；而 undefined + undefined 或 undefined + "5" 均会强制转为 NaN。
其次， 元素的 .value 始终是字符串类型。若用户输入 "10" 和 "20"，直接执行 "10" + "20" 得到的是字符串拼接结果 "1020"，而非数值相加 30。因此必须使用 parseInt()、parseFloat() 或一元加号 + 进行显式转换。
以下是修正后的完整可运行代码（已优化结构、添加提示与容错）：
立即学习“前端免费学习笔记（深入）”；
简易加法计算器 简易加法计算器
✅ 关键改进说明：
- 使用 getElementById 替代 getElementsByName，避免数组索引风险，代码更简洁可靠；
- 采用 +value || 0 实现安全类型转换：+"" → 0，+"abc" → NaN → 回退为 0，防止意外崩溃；
- 推荐后续升级：用
⚠️ 注意事项：
- 不要在全局作用域声明变量 c（如原代码中的 c = a + b），应使用 const/let 明确作用域；
- 避免内联事件（onclick=）过度使用，大型项目建议用 addEventListener 解耦逻辑；
- 若需支持小数，请坚持使用 +value（自动识别浮点）而非 parseInt()（仅取整数部分）。
通过以上修正，你的计算器将稳定输出正确数值结果，真正迈出前端交互开发的第一步。
