本文详解 html + javascript 简易加法计算器常见错误：`getelementsbyname()` 返回类数组对象导致 `.value` 无法直接访问，以及字符串拼接而非数值相加引发的 `nan` 问题，并提供完整可运行的修复方案。
在构建一个仅含两个输入框和一个计算按钮的简易 HTML 计算器时，初学者常遇到输出为 NaN（Not-a-Number）的问题。根本原因有两个：DOM 方法使用不当 和 数据类型未正确转换。
首先，document.getElementsByName('One') 并不返回单个元素，而是返回一个 HTMLCollection（类似数组的对象），即使页面中只有一个 name="One" 的元素。因此，直接调用 .value 会报错或返回 undefined，进而导致 Number(undefined) + Number(undefined) 得到 NaN。正确写法是取索引 [0] 获取首个匹配元素：
document.getElementsByName('One')[0].value其次，表单输入框的 .value 始终是字符串类型。若不显式转换，JavaScript 会执行字符串拼接而非数学加法。例如："5" + "3" 结果是 "53"，而非 8。应使用 parseInt()（适用于整数）、parseFloat()（支持小数）或一元加号 + 进行强制类型转换：
const a = parseFloat(document.getElementById('Num1').value) || 0;
const b = parseFloat(document.getElementById('Num2').value) || 0;✅ 推荐使用 parseFloat() + || 0 组合：既能处理小数，又能将空值、非法输入安全默认为 0，避免 NaN 传播。
以下是修复后的完整、结构清晰、可直接运行的代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简易加法计算器</title>
<script>
function calc() {
// ✅ 正确获取输入值并转为数字（推荐使用 ID 定位，更简洁可靠）
const num1 = parseFloat(document.getElementById('Num1').value) || 0;
const num2 = parseFloat(document.getElementById('Num2').value) || 0;
const sum = num1 + num2;
// ✅ 将结果写入第一个输入框（也可另设显示区域，如 <span id="result"></span>）
document.getElementById('Num1').value = sum;
}
</script>
</head>
<body>
<h2>简易加法计算器</h2>
<form>
<input type="text" id="Num1" name="One" placeholder="输入第一个数"> <br><br>
<input type="text" id="Num2" name="Two" placeholder="输入第二个数"> <br><br>
<button type="button" onclick="calc()">计算两数之和</button>
</form>
</body>
</html>⚠️ 关键注意事项：
- 避免混用 getElementsByName() 与 getElementById() —— id 是唯一标识，语义清晰、性能更优；name 主要用于表单提交，且返回集合，需索引访问；
- <button> 标签内务必添加 type="button"，否则在 <form> 内默认为 submit，可能触发页面刷新；
- 不建议将结果写回输入框（如本例 Num1），易造成用户混淆；更佳实践是新增 <output id="result"> 或 <div id="result"></div> 作为只读结果显示区；
- 生产环境中应增加输入校验（如非数字提示）、防重复点击、支持负数与科学计数法等。
通过理解 DOM 元素获取机制与 JavaScript 类型隐式转换规则，即可彻底规避 NaN 陷阱，迈出前端交互开发坚实一步。
