多个final文本框求和异常：仅显示最后一个值，需输出至total文本框

嘿，这个问题我碰到过！大概率是两个原因导致的：一是你在HTML里重复使用了id="final"（HTML规定id必须是唯一的，多个元素不能共用同一个id）；二是你的JavaScript代码里没有正确做累加，反而每次循环都把总和变量覆盖成当前输入框的值了。

下面是完整的修正方案：

第一步：修正HTML结构（修复id重复问题） #

把原来的id="final"改成class="final"，因为class是用来标记一组相同类型元素的，而id只能给单个元素用。这里我补全了表格的完整结构，方便你测试：

<p>product invoice</p>
<table>
  <tr>
    <td>qty</td>
    <td>rate</td>
    <td>amount</td>
    <td>final</td>
  </tr>
  <tr>
    <td><input type="text" class="qty" name="qty" style="width:50%"></td>
    <td><input type="text" class="rate" name="rate" style="width:50%"></td>
    <td><input type="text" class="amount" name="amount" style="width:50%"></td>
    <td><input type="text" class="final" name="final" style="width:50%"></td>
  </tr>
  <tr>
    <td><input type="text" class="qty" name="qty" style="width:50%"></td>
    <td><input type="text" class="rate" name="rate" style="width:50%"></td>
    <td><input type="text" class="amount" name="amount" style="width:50%"></td>
    <td><input type="text" class="final" name="final" style="width:50%"></td>
  </tr>
  <!-- 可以根据需求添加更多行 -->
</table>
<p>Total: <input type="text" id="total" readonly></p>
<button onclick="calculateTotal()">Calculate Total</button>

第二步：编写正确的累加逻辑 #

下面的JavaScript代码会遍历所有class为final的输入框，把它们的数值累加起来，最后显示到total输入框里：

function calculateTotal() {
  // 初始化总和为0，这一步很关键！
  let totalSum = 0;
  // 获取所有class为final的输入框元素
  const finalInputs = document.querySelectorAll('.final');
  
  // 遍历每个输入框，逐个累加值
  finalInputs.forEach(input => {
    // 把输入值转为数字，空值或非数字内容默认按0处理
    const inputValue = parseFloat(input.value) || 0;
    // 累加操作：总和 = 总和 + 当前输入框的值
    totalSum += inputValue;
  });
  
  // 把计算结果赋值给total输入框，toFixed(2)用来保留两位小数，可按需调整
  document.getElementById('total').value = totalSum.toFixed(2);
}

关键注意点 #

• id唯一性：永远不要给多个元素设置相同的id，这是HTML的基础规范，否则用getElementById只会获取到第一个匹配的元素，后续的都拿不到。
• 累加而非赋值：别写成totalSum = inputValue，那样每次循环都会把总和替换成当前输入框的值，最后自然只显示最后一个。一定要用totalSum += inputValue来累加。
• 处理异常值：用parseFloat(...) || 0可以避免输入框为空或者输入非数字时出现NaN（非数字）的错误，保证计算正常进行。

内容的提问来源于stack exchange，提问作者ritesh rc