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