本文详解 html + javascript 简易计算器中因 dom 获取方式不当和类型转换缺失导致的 nan 错误，并提供可直接运行的修正方案。
在构建基础 HTML 计算器时，一个常见却容易被忽视的问题是：点击按钮后结果显示为 NaN（Not-a-Number）。这并非逻辑错误，而是源于两个关键环节的疏漏——DOM 元素获取方式不准确与输入值未进行数值类型转换。
首先，document.getElementsByName('One') 返回的是一个 HTMLCollection（类数组对象），而非单个元素。即使页面中只有一个 name="One" 的输入框，你也必须通过索引 [0] 显式访问它，否则 .value 会作用于整个集合，返回 undefined；而 undefined + undefined 或 undefined + "5" 均会强制转为 NaN。
其次，<input> 元素的 .value 始终是字符串类型。若用户输入 "10" 和 "20"，直接执行 "10" + "20" 得到的是字符串拼接结果 "1020"，而非数值相加 30。因此必须使用 parseInt()、parseFloat() 或一元加号 + 进行显式转换。
以下是修正后的完整可运行代码（已优化结构、添加提示与容错）：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简易加法计算器</title>
<script>
function calc() {
// ✅ 正确获取输入框：使用 getElementById（更高效、语义清晰）
const input1 = document.getElementById("Num1");
const input2 = document.getElementById("Num2");
// ✅ 安全转换为数字：使用 + 操作符，失败时默认为 0
const a = +input1.value || 0;
const b = +input2.value || 0;
const sum = a + b;
// ✅ 输出到第一个输入框（也可改为独立 <span> 或 <output> 标签提升语义）
input1.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>✅ 关键改进说明：
- 使用 getElementById 替代 getElementsByName，避免数组索引风险，代码更简洁可靠；
- 采用 +value || 0 实现安全类型转换：+"" → 0，+"abc" → NaN → 回退为 0，防止意外崩溃；
- <button> 添加 type="button"，避免表单默认提交行为干扰；
- 推荐后续升级：用 <output> 标签显示结果（语义化更强），或添加输入校验（如仅允许数字）。
⚠️ 注意事项：
- 不要在全局作用域声明变量 c（如原代码中的 c = a + b），应使用 const/let 明确作用域；
- 避免内联事件（onclick=）过度使用，大型项目建议用 addEventListener 解耦逻辑；
- 若需支持小数，请坚持使用 +value（自动识别浮点）而非 parseInt()（仅取整数部分）。
通过以上修正，你的计算器将稳定输出正确数值结果，真正迈出前端交互开发的第一步。
