Sum values from inputs and subtract from total

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" />