Auto Sum Input Value of Add Number Button Using Javascript

Question

I want to update the Input field with a button and auto display of all Input fields above. If the button is pressed, the input will automatically add a number and if there is an addition, the total input must also be added automatically.

 function eoscounting() { var Eos = parseInt(document.getElementById('eos_count').value, 10); Eos = isNaN(Eos) ? 0 : Eos; Eos++; document.getElementById('eos_count').value = Eos; } function basocounting() { var Baso = parseInt(document.getElementById('baso_count').value, 10); Baso = isNaN(Baso) ? 0 : Baso; Baso++; document.getElementById('baso_count').value = Baso; } function stabcounting() { var Stab = parseInt(document.getElementById('stab_count').value, 10); Stab = isNaN(Stab) ? 0 : Stab; Stab++; document.getElementById('stab_count').value = Stab; } function segcounting() { var Seg = parseInt(document.getElementById('seg_count').value, 10); Seg = isNaN(Seg) ? 0 : Seg; Seg++; document.getElementById('seg_count').value = Seg; } function monocounting() { var Mono = parseInt(document.getElementById('mono_count').value, 10); Mono = isNaN(Mono) ? 0 : Mono; Mono++; document.getElementById('mono_count').value = Mono; } function limcounting() { var Lim = parseInt(document.getElementById('lim_count').value, 10); Lim = isNaN(Lim) ? 0 : Lim; Lim++; document.getElementById('lim_count').value = Lim; } function findTotal() { const fees = document.querySelectorAll(".fee"); const total = document.querySelector("#total"); let sum = 0; fees.forEach(fee => { if (fee.valueAsNumber) { sum += fee.valueAsNumber; } }); total.value = sum; }

 <input type="number" id="eos_count" class="fee" name="qty" onchange="findTotal()" /> <input type="number" id="baso_count" class="fee" name="qty" onchange="findTotal()" /> <input type="number" id="stab_count" class="fee" name="qty" onchange="findTotal()" /> <input type="number" id="seg_count" class="fee" name="qty" onchange="findTotal()" /> <input type="number" id="mono_count" class="fee" name="qty" onchange="findTotal()" /> <input type="number" id="lim_count" class="fee" name="qty" onchange="findTotal()" /> <br /><br /> <input type="number" name="total" id="total" /> <br /><br /> <button class="input" value="myvalue" onclick="eoscounting()">Eosinofil</button> <button class="input" value="myvalue" onclick="basocounting()">Basofil</button> <button class="input" value="myvalue" onclick="stabcounting()">Netrofil Batang</button> <button class="input" value="myvalue" onclick="segcounting()">Netrofil Segmen</button> <button class="input" value="myvalue" onclick="monocounting()">Monosit</button> <button class="input" value="myvalue" onclick="limcounting()">Limfosit</button>

Any help would be appreciated.

Answer 1

The on change event isn't being fired by your javascript because of the reason below.

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

You would need to manually trigger the onChange event, however I'm not completely sure how to do that. A quick solution would be to call the findTotal() function inside each of your counting functions.

 function eoscounting() { var Eos = parseInt(document.getElementById('eos_count').value, 10); Eos = isNaN(Eos) ? 0 : Eos; Eos++; document.getElementById('eos_count').value = Eos; findTotal(); } function basocounting() { var Baso = parseInt(document.getElementById('baso_count').value, 10); Baso = isNaN(Baso) ? 0 : Baso; Baso++; document.getElementById('baso_count').value = Baso; findTotal(); } function stabcounting() { var Stab = parseInt(document.getElementById('stab_count').value, 10); Stab = isNaN(Stab) ? 0 : Stab; Stab++; document.getElementById('stab_count').value = Stab; findTotal(); } function segcounting() { var Seg = parseInt(document.getElementById('seg_count').value, 10); Seg = isNaN(Seg) ? 0 : Seg; Seg++; document.getElementById('seg_count').value = Seg; findTotal(); } function monocounting() { var Mono = parseInt(document.getElementById('mono_count').value, 10); Mono = isNaN(Mono) ? 0 : Mono; Mono++; document.getElementById('mono_count').value = Mono; findTotal(); } function limcounting() { var Lim = parseInt(document.getElementById('lim_count').value, 10); Lim = isNaN(Lim) ? 0 : Lim; Lim++; document.getElementById('lim_count').value = Lim; findTotal(); } function findTotal() { const fees = document.querySelectorAll(".fee"); const total = document.querySelector("#total"); let sum = 0; fees.forEach(fee => { if (fee.valueAsNumber) { sum += fee.valueAsNumber; } }); total.value = sum; }

 <input type="number" id="eos_count" class="fee" name="qty" /> <input type="number" id="baso_count" class="fee" name="qty" /> <input type="number" id="stab_count" class="fee" name="qty" /> <input type="number" id="seg_count" class="fee" name="qty" /> <input type="number" id="mono_count" class="fee" name="qty" /> <input type="number" id="lim_count" class="fee" name="qty" /> <br /><br /> <input type="number" name="total" id="total" /> <br /><br /> <button class="input" value="myvalue" onclick="eoscounting()">Eosinofil</button> <button class="input" value="myvalue" onclick="basocounting()">Basofil</button> <button class="input" value="myvalue" onclick="stabcounting()">Netrofil Batang</button> <button class="input" value="myvalue" onclick="segcounting()">Netrofil Segmen</button> <button class="input" value="myvalue" onclick="monocounting()">Monosit</button> <button class="input" value="myvalue" onclick="limcounting()">Limfosit</button>