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.

Call findTotal() at the end of all the xxxcounting() functions. — Barmar
– Barmar, Commented Jun 10, 2022 at 22:23
since all counting functions are the same besides the name of the field they check, you should use only one function that takes the name of the field as argument: function counting(what) { var val = parseInt(document.getElementById(what).value, 10); val = isNaN(val) ? 0 : val; val++; document.getElementById(what).value = val; }. I just copied your function and hope that I didnt introduce a typo :) — Michael
– Michael, Commented Jun 10, 2022 at 22:27

WizardCoder · Accepted Answer · 2022-06-10 22:39:26Z

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>

Thank you very much for the answer, because I'm still in the learning stage.

Collectives™ on Stack Overflow

Auto Sum Input Value of Add Number Button Using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related