HTML 简易计算器常见错误解析与正确实现方法

本文详解 html + javascript 实现简易加法计算器时的典型错误：`getelementsbyname()` 返回数组导致 `nan`、未类型转换字符串、dom 元素位置不当等问题，并提供完整可运行的修复方案。

在初学 html 与 javaScript 交互时，构建一个“输入两数 → 点击求和 → 显示结果”的简易计算器是常见练习。但如示例代码所示，直接调用 document.getElementsByName(‘One’).value 往往返回 NaN（Not-a-number），根本原因有三点：

1. getElementsByName() 返回的是 HTMLCollection（类数组），而非单个元素
   即使页面中只有一个 name=”One” 的输入框，document.getElementsByName(‘One’) 仍返回类似 [input#Num1] 的集合。必须通过索引取值：

   document.getElementsByName('One')[0].value  // ✅ 正确获取第一个匹配元素的值

2. 表单输入值默认为字符串，”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;

3. HTML 结构顺序与 DOM 加载时机问题
   原代码中

   • 使用 getElementById()（唯一 ID 更可靠）；
   • 将逻辑封装在事件监听器中，确保 DOM 加载完成（如 DOMContentLoaded）；
   • 或将