JavaScript简易计算器输入值读取异常：求和返回NaN求助

核心问题排查与修复 #

1. DOM加载时机错误
   如果JS代码写在HTML输入框之前，页面还没渲染完成就去获取元素，要么拿不到目标元素，要么只能获取到初始默认值，后续输入新值也无法同步更新。

修复方式：
把JS代码放在</body>标签末尾，或者用DOMContentLoaded事件包裹逻辑，确保DOM完全加载后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  // 所有计算器逻辑写在这里
});

2. 提前缓存输入值导致无法获取实时数据
   很多新手会在页面加载时就把输入框的value存在变量里，比如：

// 错误写法：仅能获取页面加载时的初始值，后续输入新值不会更新
const num1 = parseFloat(document.getElementById('Fld1').value);

这种写法只会拿到初始的0，之后输入新值时变量仍保留旧数据。

修复方式：
在触发计算的事件（比如点击求和按钮）时，再实时获取输入框的当前值：

function calculateSum() {
  // 每次计算时重新获取最新输入值
  const num1 = parseFloat(document.getElementById('Fld1').value) || 0;
  const num2 = parseFloat(document.getElementById('Fld2').value) || 0;
  const sum = num1 + num2;
  // 将结果显示到页面
  document.getElementById('result').textContent = sum;
}

这里用|| 0是为了处理输入为空的情况，避免出现NaN。

3. 元素选择器拼写错误
   检查HTML里的输入框id是否和JS里的选择器一致，id区分大小写，比如HTML里是id="fld1"，JS里写getElementById('Fld1')就会拿不到元素，导致转换时出现NaN。

完整可运行示例 #

<!DOCTYPE html>
<html>
<body>
  <input type="number" id="Fld1" value="0">
  <input type="number" id="Fld2" value="0">
  <button onclick="calculateSum()">求和</button>
  <p>计算结果：<span id="result"></span></p>

  <script>
    function calculateSum() {
      const input1 = document.getElementById('Fld1');
      const input2 = document.getElementById('Fld2');
      const num1 = parseFloat(input1.value) || 0;
      const num2 = parseFloat(input2.value) || 0;
      document.getElementById('result').textContent = num1 + num2;
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sufiyan Malik