Javascript function only working on second click

Question

So i am trying to hide/show elements in a navigational overlay on phones using Javascript. I have it working as it on the second click shows the element, and thereafter function each time i click. But it does not work on the first click and i cant seem to understand why.

Here is my code:

 function hidelinks() { if ( document.getElementById("secondmenu").style.display =="none"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display ="block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display ="none"; } }

 #secondmenu { display: none; }

 <div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>

I do not know where it goes wrong!

Thank you in advance :)

Answer 1

By default document.getElementById("secondmenu").style.display return empty string ... so just change the 'if' and it work ...

 function hidelinks() { if ( document.getElementById("secondmenu").style.display != "block"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display ="block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display = "none"; } }

 #secondmenu { display: none; }

 <div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>

Answer 2

On the first run the style.display property is equal to an empty string. That's why it only work on the second click.

You can make a second comparation like this:

 if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") {
    console.log(document.getElementById("secondmenu").style.display)

Or invert the condition: ...display != "block"

Or you can set the elementstyle inline <ul id="secondmenu" class="nobull" style="display: block">

Or you can set it with javascript:

document.getElementById("secondmenu").style.display = "none"

 function hidelinks() { if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") { console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display = "block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display = "none"; } }

 #secondmenu { display: none; }

 <div id="myTopnav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>

Answer 3

1) If you change styles with javascript it becomes an inline styling . Therefore you need to put your display: none styling inline or set it with javascript from the beginning. (Code below)

2) Another solution is to change the if condition to:

if ( document.getElementById("secondmenu").style.display != "block"){ }

 function hidelinks() { if ( document.getElementById("secondmenu").style.display === "none"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display = "block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display ="none"; } }

 <div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull" style="display: none"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>