本文详解 html + javascript 实现简易加法计算器时的典型错误：`getelementsbyname()` 返回数组导致 `nan`、未类型转换字符串、dom 元素位置不当等问题，并提供完整可运行的修复方案。
在初学 HTML 与 JavaScript 交互时，构建一个“输入两数 → 点击求和 → 显示结果”的简易计算器是常见练习。但如示例代码所示，直接调用 document.getElementsByName('One').value 往往返回 NaN（Not-a-Number），根本原因有三点：
-
getElementsByName() 返回的是 HTMLCollection（类数组），而非单个元素
即使页面中只有一个 name="One" 的输入框，document.getElementsByName('One') 仍返回类似 [input#Num1] 的集合。必须通过索引取值：document.getElementsByName('One')[0].value // ✅ 正确获取第一个匹配元素的值 -
表单输入值默认为字符串，"5" + "3" 结果是 "53" 而非 8
必须显式转换为数字类型：推荐使用 parseFloat()（支持小数）或 parseInt(value, 10)（整数，指定十进制），避免 +value 或 Number() 在空值时转为 0 的隐式陷阱。const a = parseFloat(document.getElementById('Num1').value) || 0; const b = parseFloat(document.getElementById('Num2').value) || 0; -
HTML 结构顺序与 DOM 加载时机问题
原代码中- 使用 getElementById()（唯一 ID 更可靠）；
- 将逻辑封装在事件监听器中，确保 DOM 加载完成（如 DOMContentLoaded）；
- 或将
