时间戳

首页 > 解决方案 > JavaScript 中的自动求和字段

javascript - JavaScript 中的自动求和字段

问题描述

如何在不单击求和按钮的情况下自动对某些文本字段求和？

<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”已经自动为每个选中的按钮求和。我想将每个总索引的总和作为最终结果，而无需单击对这些变量求和的按钮。

标签： javascripthtml

解决方案

在每个标签上使用输入事件<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 />

推荐阅读