Show the length of display ="none"; using javascript

Question

I have a function that does style.display = "none" when a something is clicked.

I would like to know how I could find out the length of the elements that are displayed none.

 function closeEvent() { var close = document.getElementsByClassName("close"); for (var i = 0; i < close.length; i++) { close[i].onclick = function () { var div = this.parentElement; div.style.display = "none"; renderGraph(); } } }

 <div id="myDIV" class="header"> <h1>My Daily Tasks</h1> <p>Add a time and task then press enter. When finished task click on task bar</p> <p>To delete task click on <span id="x-text">x</span> in the corner of task bar</p> <input type="time" id="myInput1" value="06:00"> <input name="text" type="text" id="myInput" placeholder="My task..."> <span onclick="newElement()" class="addBtn" id="myBtn"></span> </div> <ul id="columns"> </ul>

Answer 1

You can use the following code to select only the elements with the style attribute "display:none" and get the total found.

var total = document.querySelectorAll('[style="display: none;"]').length

Take a look at the full documentation of querySelector and querySelectorAll. They are both quite powerful selectors which you can use just like a css selector:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

The problem you will face is that your code may very well not be the only one to hide elements this way.
A lot of libraries also use this inline style to hide elements, for instance, that's what jQuery.hide() does.

So you may very well catch false positives, if the only distinction point is that style.

Depending on your exact uses, you could simply maintain an Array of these elements, if you need to keep track of them and reuse quite often:

 const myhidden_elements = []; document.addEventListener('click', e => { if( e.target.matches(".hideable") ) { e.target.style.display = "none"; myhidden_elements.push(e.target); const hidden_count = myhidden_elements.length; console.log( hidden_count ); } });

 <div class="hideable">hide me 1</div> <div class="hideable">hide me 2</div> <div class="hideable">hide me 3</div> <div class="hideable">hide me 4</div> <div class="hideable">hide me 5</div> <div class="hideable">hide me 6</div>

But it might even be better to add your own class to these hidden elements. It might be easier to maintain and to then access exactly these elements you are interested in.

 document.addEventListener('click', e => { if( e.target.matches(".hideable") ) { e.target.classList.add('my-hidden-class'); const hidden_count = document.querySelectorAll('.my-hidden-class').length; console.log( hidden_count ); } });

 .my-hidden-class { display: none; }

 <div class="hideable">hide me 1</div> <div class="hideable">hide me 2</div> <div class="hideable">hide me 3</div> <div class="hideable">hide me 4</div> <div class="hideable">hide me 5</div> <div class="hideable">hide me 6</div>