javascript - 表单输入数字 onchange

Question

如下面的代码所示，当我单击为“val1”添加值的按钮时，我想动态地将输入“total”的值更改为两个输入的总和。我不想在按钮上添加此事件作为 onclick，因为最后将有几个字段对总数进行求和，并且在没有按钮的情况下它们会发生变化。

实际上我希望“total”的值也以这个总和开始，我不想输入值8。

As sugest by @tallberg ，如下:

function addVal(index) {
  if (document.getElementById(index).value < 20) {
    document.getElementById(index).value = Number(document.getElementById(index).value) + 1;
    calcSum();
  }
}

var ValueElements = document.getElementsByClassName('Value');
var TotalElement = document.getElementById('total');
for (var i of ValueElement) {
  i.addEventListener('keyup', calcSum)
}

function calcSum() {
  var sum = 0;
  for (var i of ValueElements) {
    sum += parseInt(i.value) || 0;
  }
  TotalElement.value = sum;
}

<td>
  <input type="number" class="Value" name="VAL1" id="val1" value="8" min="8" max="20" readonly="true">
  <button type="button" id="btAddVal" onclick="addVal('val1');"><img src="img/icons/mais.png"> 
        </button>
</td>
<td><input type="number" class="Value" name="VAL2" id="val2" value="0" readonly="true"></td>
<td><input type="number" name="TOTAL" id="total" readonly="true" value="8"></td>

Answer 1

您可以通过类名获取所有元素并应用执行计算的监听器。

// get all value inputs
var valueElements = document.getElementsByClassName('value');
// get total sum input
var sumElement = document.getElementById('sum');
// add listeners to all value inputs
for(var val of valueElements) {
  val.addEventListener('input', calcSum); 
}
// add value to element by id
function add(id, value){
  var e = document.getElementById(id);  
  var v = e.value;
  e.value = parseInt(v) ? parseInt(v) + value : value;
  calcSum();
}
// use the array of elements to calculate the sum
function calcSum() {
  var sum = 0;
  for(var val of valueElements) {
    sum += parseInt(val.value) || 0;
  }
  sumElement.value = sum;
}

.value { width: 4em}
#sum { width: 8em}

<div>
<input type="number" id="v1" class="value">+
<input type="number" id="v2" class="value">+
<input type="number" id="v3" class="value">=
<input type="number" id="sum">
</div>
<button type="button" onclick="add('v1',5)">Add 1:st</button>
<button type="button" onclick="add('v2',2)">Add 2:nd</button>
<button type="button" onclick="add('v3',4)">Add 3:rd</button>