Navigation bar JavaScript
Question
I am writing a code to open and close navigation bar with the button my code is as follows
#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>
It wont work what should I do or what am I doing wrong? There are other CSS properties for navigation bar which I have skipped.
3 answers
solution1
2 2018-10-27 22:49:32
It doesn't work because you have to set its display with javascript or with inline style to get something by yourDiv.style.display. In your case, when you click on your button, the display is not set and then you can't enter nor in your if neither in your else if statement. So try this:
var togg = document.getElementById('DIV1'); togg.style.display="block"; /* => I set a display value */ function abc(){ if (togg.style.display == "block") { togg.style.display="none"; } else if (togg.style.display == "none") { togg.style.display="block"; } }
#DIV1 { display:block; } /*you can remove this rule. You are changing the display via javascript */
<div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button>
Another way: you could simply create a class to "hide" your div and then toggle it using classList and toggle :
function abc(){ var togg = document.getElementById('DIV1') togg.classList.toggle("myClass"); }
.myClass { display:none; }
<div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button>
solution2
1 2018-10-27 22:20:00
here is the correct code:
<style> #DIV1{ display:block;} </style> <div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button> <script> function abc() { var togg = document.getElementById('DIV1'); if (togg.style.display == "block") { togg.style.display="none"; } else { togg.style.display="block"; } } </script>
solution3
1 2018-10-27 22:22:34
if i understood your question try this one:
<!DOCTYPE html> <html lang="en"> <head> <style> #div1{ display:block;} </style> <script> function abc() { var togg = document.getElementById("div1") if (togg.style.display === "none")// 3 === { togg.style.display="block"; } else { togg.style.display="none"; } } </script> </head> <body> <div id="div1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onclick="abc()">HIDE</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.