实时求和输入字段中的数字并显示 Javascript

Question

我正在尝试弄清楚如何将输入数字求和并显示为实时计算。 它有点有效，但计算是错误的。每次迭代都会增加更大的数字，就像算术序列一样。我该如何解决这个问题？

"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;
  });
});

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

这是代码笔：https://codepen.io/Bartosz-Spychaa-the-bold/pen/GRPNwYa?editors=1111

Answer 1

委托和映射/归约

HTML 也无效

const scoreContainer = document.getElementById('scoreContainer');
const fields = scoreContainer.querySelectorAll('.score');
const totalField = document.getElementById('total');
scoreContainer.addEventListener('input', () => {
  total.value = [...fields].map(field => {
    const val = +field.value; // convert to number
    return isNaN(val) ? 0 : val;
  }).reduce((a, b) => a + b);
});

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

Answer 2

JS 事件监听器的计算问题

问题在于

tot

变量是在

addEventListener

回调之外声明的。这意味着每次您输入一个值时，它都会将所有输入的当前总和添加到

tot

变量的现有值中。

如何：修复此问题：在每个输入事件开始时将

tot

变量重置为 0。

修复了 JavaScript：

"use strict";

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

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

固定的

JavaScript

应该可以解决您的问题。如果您还有任何问题或疑问，请随时询问。