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 : 
 Qty2 : 
 Qty3 : 
 Qty4 : 



 Total :

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

user_18099076 · Answer

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 : 

Qty2 : 

Qty3 : 

Qty4 : 




Total :

Sum values from inputs and subtract from total

1 Answers