How to live count input if value is entered or active by using javascript

Question

I want to count the input after it is filled with numbers, but if it is not filled then the input is not counted.

I tried using the following HTML

<input type="number" class="myclass" value="4">
<input type="number" class="myclass" value="2">
<input type="number" class="myclass" value="0"> <!-- "0" / blank, not counted -->
<input type="number" class="myclass" value="3">

<!-- count result = 3 -->
<div id="count"></div>

and javascript

function livecountinput(){
let num = document.getElementsByClassName('myclass').length;
let count = document.getElementById('count');
count.innerHTML = num
};
document.addEventListener("DOMContentLoaded", function(event) {
   livecountinput();
});

all that works but if there are zeros still counted, how to solve it? Any help would be appreciated.

myclass should be class and not type, correct? In javascript you are not accesing the value property of any input. I think you should consider that. — DeusDev
– DeusDev, Commented Jul 7, 2022 at 22:36
@Carlos Sorry, I wrote it wrong, all that works but if there are zeros still counted, how to solve it? — atlm
– atlm, Commented Jul 7, 2022 at 22:42
are you sure it is not working? I tried it out and it works for me. jsfiddle.net/ghmvzLdc/2 — Cristian-Florin Calina
– Cristian-Florin Calina, Commented Jul 7, 2022 at 22:54

ask4you · Accepted Answer · 2022-07-07 23:28:03Z

1

With document.getElementsByClassName('myclass').length you get the length of the array with HTMLNodes. If you have 4 elements with that class name then you get a length of 4. Maybe this is what you want:

function livecountinput() {
  let numNodes = document.getElementsByClassName('myclass');
  let length = [...numNodes].filter((node) => parseInt(node.value) !== 0).length
  let count = document.getElementById('count');
    count.innerHTML = length
};
document.addEventListener("DOMContentLoaded", function(event) {
  livecountinput();
});

<input type="number" class="myclass" value="4">
<input type="number" class="myclass" value="2">
<input type="number" class="myclass" value="0"> <!-- "0" / blank, not counted -->
<input type="number" class="myclass" value="3">

<!-- count result = 3 -->
<div id="count"></div>

answered Jul 7, 2022 at 23:28

ask4you

8186 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

atlm Over a year ago

I will add onkeyup="livecountinput() because I want to make it live, if the input is changed then all counts will change live.

Collectives™ on Stack Overflow

How to live count input if value is entered or active by 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