JavaScript实时求和输入框数值错误：累加呈等差数列如何解决？

问题重现 #

尝试实现输入框数值实时求和展示，但每次输入都会导致总和呈等差数列式递增，核心代码如下：

HTML代码

<p><input type="text" class="score" id="myInputField12"></p>
<p><input type="text" class="score" id="myInputField13"></p>
<p><input type="text" class="result" id="total"></p>

JavaScript代码

"use strict";

let tot = 0;

let myInputField = document.querySelectorAll(".score");

myInputField.forEach((el) => {
  el.addEventListener("input", () => {
    for (let i = 0; i < myInputField.length; i++) {
      if (parseInt(myInputField[i].value))
        tot += parseInt(myInputField[i].value);
    }
    document.getElementById("total").value = tot;
  });
});

问题根源 #

全局变量tot被用来累积总和，但每次触发input事件时，代码会将所有输入框的数值追加到tot上，而非重新计算当前所有输入的总和。例如：

• 第一次输入1，tot变为1；
• 第二次输入2，代码会把1和2再次加到tot上，tot变为1+1+2=4；
• 第三次输入3，tot变为4+1+2+3=10；
  以此类推，导致总和每次叠加之前的结果，出现异常递增。

修复方案 #

方案1：每次计算前重置全局总和变量

在input事件处理函数开头，将tot重置为0，确保每次计算都是基于当前输入框的最新值：

"use strict";

let tot = 0;
let myInputField = document.querySelectorAll(".score");

myInputField.forEach((el) => {
  el.addEventListener("input", () => {
    tot = 0; // 重置总和，避免累积
    for (let i = 0; i < myInputField.length; i++) {
      const value = parseInt(myInputField[i].value);
      // 用!isNaN判断更严谨，避免空值/非数字被错误计算
      if (!isNaN(value)) {
        tot += value;
      }
    }
    document.getElementById("total").value = tot;
  });
});

方案2：使用局部变量计算总和（推荐）

直接在事件处理函数内部声明局部变量tot，彻底避免全局变量的累积问题，同时简化代码：

"use strict";

const myInputField = document.querySelectorAll(".score");

myInputField.forEach((el) => {
  el.addEventListener("input", () => {
    let tot = 0; // 每次事件触发时重新初始化局部变量
    myInputField.forEach(input => {
      const value = parseInt(input.value);
      if (!isNaN(value)) {
        tot += value;
      }
    });
    document.getElementById("total").value = tot;
  });
});

额外优化说明 #

• 用!isNaN(value)替代原有的parseInt(...)判断，因为空字符串或非数字输入会被parseInt返回NaN，原判断会跳过这些值，但!isNaN的逻辑更清晰；
• 若需要支持小数求和，可将parseInt替换为parseFloat或Number()。

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