0

I want to check if my dice display is none. If it is print console.log().

My code:

const dice = document.querySelectorAll(".dice");

for (var i = 0; i < 5; i++) {
        if (dice[i].style.display == "none") {     //also tried with ===
            console.log("nth here " + i);}
        }

Here's what I also tried

for (var i = 0; i < 5; i++) {
        var isVisible = (dice[i].style.display == "none");
        if (isVisible){console.log('nth here ' + i);}
    }

And:

for (var i = 0; i < 5; i++) {
       if (document.querySelector('.dice').style.display === 'none') {
            console.log("nth here " + i);
        }
}
Smokus
  • 47
  • 4
  • 1
    Have you tried `console.log(dice[i].style.display)` first, instead of making comparisons and guessing what the value could be? Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, a CSS class should be used, e.g. `.hidden { display: none; }`; then [`.classList.contains("hidden")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("hidden")`, etc. Consider using the [`hidden` attribute](//developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) instead. – Sebastian Simon Sep 26 '21 at 10:47
  • That last code doesn’t make sense. `querySelector` always finds the _first_ matching element. You’re checking the same element 5 times. – Sebastian Simon Sep 26 '21 at 10:48
  • @SebastianSimon that's true I just tried if it's gonna work at least for first one. – Smokus Sep 26 '21 at 11:05
  • @SebastianSimon Comparison is made for the rest of my code. ```Console.log()``` is just for tests. ```.classList.contains("hidden")``` worked. Thank you for your help :) – Smokus Sep 26 '21 at 11:10

0 Answers0