It doesn't work on the first click, but does on the second one. How to fix that?

Question

So I have function like this, it doesn't work on the first click, but does on the second one. How to fix that?

 let coll = document.getElementsByClassName('collection'); let dis = document.getElementsByClassName('display'); document.getElementById("menu-btn1").addEventListener("click", function() { if(coll[0].style.display == 'none') { coll[0].style.display = 'block'; dis[0].style.display = 'none'; } else { coll[0].style.display = 'none'; } });

 .collection { width: 80vh; height: 85vh; background-color: blue; display: none; grid-column: 4 / 10; grid-row: 2 / 9; justify-self: center; z-index: 3; }

 <div class="collection"></div>

(and yes - I was looking for case like that before, but most of it is jQuery, and I don't get it, please help)

Answer 1

Because coll[0].style.display = 'block'; search for an inline-style and you're adding the display: none; on a css class, if you're checking the styles, you need to add the inline style like this:

<div class="collection" style="display:none;"></div>

Here you can see the snippet with the correct styles

 let coll = document.getElementsByClassName('collection'); let dis = document.getElementsByClassName('display'); document.getElementById("menu-btn1").addEventListener("click", function() { if(coll[0].style.display == 'none') { coll[0].style.display = 'block'; //dis[0].style.display = 'none'; } else { coll[0].style.display = 'none'; } });

 .collection { width: 80vh; height: 85vh; background-color: blue; grid-column: 4 / 10; grid-row: 2 / 9; justify-self: center; z-index: 3; }

 <div class="collection" style="display:none;"> </div> <button id="menu-btn1">Toggle</button>

Answer 2

I would suggest cleaning up your code and using a class toggle to hide and show it

your CSS:

.collection {
    width: 80vh;
    height: 85vh;
    background-color: blue;

    grid-column: 4 / 10;
    grid-row: 2 / 9;
    justify-self: center;
    z-index: 3;
}
.hidden {
    display: none;
}

Your HTML:

<div class="collection hidden"></div>
<div class"display"></div> <!--I was assuming your .display element was visible at first and you wanted to hide it afterwards-->

Your JS:

let coll = document.getElementsByClassName('collection');
let dis = document.getElementsByClassName('display');

document.getElementById("menu-btn1").addEventListener("click", function() {
  coll[0].classList.toggle("hidden");
  dis[0].classList.toggle("hidden");
});

This way your code is cleaner, and since you create a separate class for the display: none; you're avoiding icky issues about the hierarchy of selector styles in CSS when you apply that "display: none;" to all elements of that class but only try to change the display for one of the elements in that class

Answer 3

I think the code you shared is not complete, I can't see these classes in the html menu-btn1 and display , you can upload code to github for example or any other tool you like