从输入中求和并从总计中减去

Question

The point is that you can enter values in the fields, and the final result is obtained by subtracting from 100

 function findTotal() { var arr = document.getElementsByClassName('injection-dist'); var tot = document.getElementById('total').value; var sum = 0; for (var i = 0; i < arr.length; i++) { if (parseInt(arr[i].value)) { sum += parseInt(arr[i].value); } } final = tot - sum; document.getElementById('total').value = final; }

 Qty1: <input onblur="findTotal()" type="text" class="injection-dist" name="qty[]" id="qty1" /><br> Qty2: <input onblur="findTotal()" type="text" class="injection-dist" name="qty[]" id="qty2" /><br> Qty3: <input onblur="findTotal()" type="text" class="injection-dist" name="qty[]" id="qty3" /><br> Qty4: <input onblur="findTotal()" type="text" class="injection-dist" name="qty[]" id="qty4" /><br> <br><br> Total: <input type="text" name="total" id="total" value="100" />

The code works, but only when entering a single value. When entering a second value, some recalculation is done and the result is incorrect

For example, if we enter a value of 1 in a field, we get 99, but when we enter a subsequent value of 2 in another field, we get 96 instead of 97...

Thanks if anyone can help

Answer 1

I've removed the function that you had, since it was getting the value of all input fields at the same tame, and then basically doing total - SumOfAllInputs each time you change a value.

Instead, I created a list of all inputs, and added the change event for each of them, that gets the value ONLY of the one that is currently changed, and then do total - thatValue .

 var qty = document.querySelectorAll(".injection-dist"); //NodeList of all input fields qty.forEach(function(item){ //iterate trough the list item.addEventListener("change", function(){ // add change event for each of the elements (instead of onBlur) var value = item.value; //get value of the inserted value document.getElementById('total').value -= value;}); //change total value })

 Qty1: <input type="text" class="injection-dist" name="qty[]" id="qty1"/><br> Qty2: <input type="text" class="injection-dist" name="qty[]" id="qty2"/><br> Qty3: <input type="text" class="injection-dist" name="qty[]" id="qty3"/><br> Qty4: <input type="text" class="injection-dist" name="qty[]" id="qty4"/><br> <br><br> Total: <input type="text" name="total" id="total" value="100" />