JS简易计算器输出NaN 输入值获取异常问题排查求助

你的代码始终输出NaN，是4处逻辑错误共同导致的，后续加parseInt没有生效，是因为DOM取值逻辑从根源上就无法拿到输入值：

• DOM方法使用错误：document.getElementsByName() 返回的是匹配元素的NodeList集合，不是单个DOM节点，直接访问.value属性永远得到undefined，无法获取输入内容。
• 属性挂载位置错误：你把name属性写在了包裹输入框的<td>标签上，没有直接写在<input>元素上，就算正确调用DOM方法也匹配不到输入框节点。
• 参数格式错误：调用getElementsByName时传入的firstNoInput/secondNoInput没有加引号，会被JS识别为未定义的变量，直接触发引用错误，无法匹配对应元素。
• 取值时机错误：你在页面加载初始化阶段就执行了取值逻辑，此时用户还未输入任何内容，就算DOM获取正确，拿到的也是空值；且后续点击按钮时不会重新读取最新输入，计算始终用初始的空值执行。

以上错误叠加后，不管是直接计算还是加parseInt转换，参与运算的都是undefined转成的NaN，自然计算结果全是NaN。

按以下步骤调整代码即可正常运行：

1. 调整HTML结构，将name属性直接挂载到两个<input>标签上，移除<td>上多余的name属性
2. 把取值逻辑移到每个计算函数内部，保证点击运算按钮时能实时读取用户最新输入的内容
3. 修正DOM调用写法：给name参数加字符串引号，取到NodeList后通过[0]索引拿到第一个匹配的input元素，再读取value属性
4. 读取到输入值后统一转为数值类型，避免加法运算时出现字符串拼接问题，可额外增加除0校验提升健壮性

修复后核心代码 #

JavaScript部分 #

let ans;

function addition() {
  const num1 = Number(document.getElementsByName("firstNoInput")[0].value);
  const num2 = Number(document.getElementsByName("secondNoInput")[0].value);
  ans = num1 + num2;
  document.getElementById("screen").textContent = ans;
}

function subtraction() {
  const num1 = Number(document.getElementsByName("firstNoInput")[0].value);
  const num2 = Number(document.getElementsByName("secondNoInput")[0].value);
  ans = num1 - num2;
  document.getElementById("screen").textContent = ans;
}

function multiplication() {
  const num1 = Number(document.getElementsByName("firstNoInput")[0].value);
  const num2 = Number(document.getElementsByName("secondNoInput")[0].value);
  ans = num1 * num2;
  document.getElementById("screen").textContent = ans;
}

function division() {
  const num1 = Number(document.getElementsByName("firstNoInput")[0].value);
  const num2 = Number(document.getElementsByName("secondNoInput")[0].value);
  ans = num2 === 0 ? "错误：除数不能为0" : num1 / num2;
  document.getElementById("screen").textContent = ans;
}

HTML对应输入区域部分 #

<tr>
  <td>First Number:</td>
  <td><input type="number" name="firstNoInput" /></td>
</tr>
<tr>
  <td>Second Number:</td>
  <td><input type="number" name="secondNoInput" /></td>
</tr>

优化点：将input的type从text改为number，可以直接唤起数字输入键盘，同时天然过滤非数字输入。

内容的提问来源于stack exchange，提问作者Anupama Balasooriya