Автоматические c поле суммы в JavaScript

Question

Как автоматически суммировать какое-то текстовое поле, не нажимая кнопку для его суммирования?

<tbody>
  <tr>
    <td>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">result
          <a href="JavaScript:value();" class="badge badge-primary">SUM</a>
        </label>
        <input type="text" class="form-control" id="add" name="sum4" readonly>
     </div>
   </td>    
 </tr>
 <tr>
   <td>
    <div class="form-group">
     <label for="exampleFormControlTextarea1">Nilai Akhir/100</label>
      <input type="text" class="form-control" id="addme" name="result4" readonly>
    </div>
  </td>
 </tr>
</tbody>

и это JavaScript.

function value()
{
    var input1 = document.getElementById("totalindex1").value;
    var input2 = document.getElementById("totalindex2").value;
    var input3 = document.getElementById("totalindex3").value;
    var result = 0;
    var divider = 100;
    var resdiv = 0;
    result += parseInt(input1) + parseInt(input2) + parseInt(input3);
    resdiv = result / divider;
    document.getElementById('add').value = result;
    document.getElementById('addme').value = resdiv;
}

переменная totalindex1, " totalindex2 »и totalindex3 уже автоматически суммируются для каждой отмеченной кнопки. Я хочу получить сумму для каждого totalindex в качестве окончательного результата, не нажимая кнопку для суммирования этих переменных.

Answer 1

Используйте событие ввода для каждого тега <input>

Это событие запускается каждый раз, когда значение элемента <input> изменяется.

Можно получить все желаемые теги <input>, добавив общее имя класса

Пример:

function calcsum() {
  let sum = 0;
  for (const inputEl of document.getElementsByClassName("suminput")) {
    sum += +inputEl.value;
  }
  document.getElementById("sum").innerText = sum;
}

<input class="suminput" oninput="calcsum()" />
<input class="suminput" oninput="calcsum()" />
<input class="suminput" oninput="calcsum()" />
<div>Sum: <span id="sum"></span></div>
<br />
<div>The following input will not add to the sum</div>
<input />

Answer 2

Создайте прослушиватель событий для всех полей ввода vor sum, который вызывает вашу функцию-значение.

for (let i=1; i<=3; i++) {
    document.getElementById("totalindex"+i).addEventListener('input', value);
}