Pure JS show/hide with 'hidden' class doesn't work

Question

So I'm trying to do a navbar that show/hide when the toggle icon is clicked. I already solved the issue by not using a hidden class(using an onclick which fire a simple function with an if statement that change the style.display of the element I'm trying to show/hide). Yes, it works but I'm trying to understand Javascript (pure), so I really need to know why my first solution (hidden class) didn't worked out. Here's some code (HTML/CSS then my attempt in pure JS):

 var nav = document.querySelector('nav'); var transf = document.getElementById('toggle'); var btn = document.querySelector('.iconBtn').addEventListener('click', i => { if (nav.classList = 'hidden') { nav.classList.remove('hidden'); transf.checked = true; console.log('show'); } else { nav.classList.add('hidden'); transf.checked = false; console.log('hide'); } console.log(nav.classList); console.log(transf.checked); })

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle"> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div> </div>

So here's what I tried to do with the js part:

• gave each selector a var
• eventlistener on the btn that trigger and if statement
• basic if statement
• need transf (toggle) checked cause I styled the icon: when it's checked, it goes from a list icon to an X
• then console.logs everywhere to try to understand what is happening.

I also tried to add a second CSS class (.not-hidden: display ='flex';) to switch from one to the other: nope.

I tried to change the if statement by a switch case: same issue than with the if sstatement.

Behaviour: First click,'hidden' class is removed, if console.log returns "show", class = '', and checked is true: perfectenschlag. But then, when I click once again, class 'hidden' is not added (nor toggled, I tried) and console.log gives the same feedback as the first click, not changing anything.

tdlr: First click add the class (and shows the navbar) but the second click, while triggered, doesn't change the class. It appear that the if statement seems to only return the if, and never goes to the else, even when else is the only possible option.

Finally, I know there's a high probability that this chunk of code is utter crap, and as I said, I found another solution, but as I'm just starting with JS I think it is important to know why JS behave the way it does and that's why I come here to ask. Also, I don't know how I'm gonna make a smooth transition on my "nav.style.display" so I'm not giving up on the hidden class way.

Answer 1

I cleaned up the code, and simplified the class switching using .toggle().

It looks like it's working for me.

 var nav = document.querySelector('nav'); var btn = document.querySelector('.iconBtn') btn.addEventListener( 'click', () => nav.classList.toggle("hidden") );

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle" /> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div>

Answer 2

if (nav.classList = 'hidden') is not how you check to see if the list contains that class. Instead, that tries to assign 'hidden' to the property classList .

To check if it already has it, use contains :

if (nav.classList.contains('hidden'))

 var nav = document.querySelector('nav'); var transf = document.getElementById('toggle'); var btn = document.querySelector('.iconBtn').addEventListener('click', i => { if (nav.classList.contains('hidden')) { nav.classList.remove('hidden'); transf.checked = true; console.log('show'); } else { nav.classList.add('hidden'); transf.checked = false; console.log('hide'); } console.log(nav.classList); console.log(transf.checked); })

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle"> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div> </div>

Answer 3

您不需要使用 classList 删除，而是使用 setAttribute 来更改您的隐藏属性。