Stack Overflow Asked by Sumi on February 8, 2021
This is my first time writing a JS function. I am trying to get the navigation bar to open when the hamburger is clicked but it’s not working. I have attached my HTML and JS.
It works when I don’t allow the function to have any parameter and instead manually write "nav" where nav_type is, so I’m not sure why it’s not working.
The code:
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction(nav_type) {
var i;
var x;
for (i = 1; i < 6; i++) {
x = document.getElementById(nav_type + i);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}<nav aria-label="Main Navigation" class="topnav">
<a aria-hidden="true" href="javascript:void(0);" ; class="menu show-mobile" onclick="myFunction(" nav ")">
<img src="img/menu-icon.svg" alt="toggle menu" />
</a>
<ul class="topnav">
<li><a href="index.html" class="show-mobile">Home</a></li>
<li><a href="humans/humans.html" id="nav1">Humans</a></li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction(" drp ")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li><a href="presentations.html" id="drp1">Presentations</a></li>
<li><a href="about-islam.html" id="drp2">About Islam</a></li>
<li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>Just use HTMLElement.classList.toggle(class)
document.querySelector('#navShow').addEventListener('click', () => {
document.querySelector('ul.topnav').classList.toggle('show');
});ul.topnav {
display: none;
}
ul.topnav.show {
display: block;
} <nav aria-label="Main Navigation" class="topnav">
<a id="navShow" aria-hidden="true" href="#"; class="menu show-mobile">
Menu
</a>
<ul class="topnav">
<li><a href="index.html" class="show-mobile">Home</a></li>
<li><a href="humans/humans.html" id="nav1">Humans</a></li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li><a href="presentations.html" id="drp1">Presentations</a></li>
<li><a href="about-islam.html" id="drp2">About Islam</a></li>
<li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>For a more modern approach dispose of Javascript for the function altogether. Here we use a label and a hidden checkbox combined with CSS to control our menu show/hide.
#chkNav {
display: none;
}
.nav-bar {
display: block;
width: 30px;
height: 0px;
margin-bottom: 2px;
border: 3px solid black;
}
ul.topnav {
display: none;
}
#chkNav:checked + ul.topnav {
display: block;
}<nav aria-label="Main Navigation" class="topnav">
<label for="chkNav" aria-label="show nav">
<span class="nav-bar"></span>
<span class="nav-bar"></span>
<span class="nav-bar"></span>
</label>
<input type="checkbox" id="chkNav" />
<ul class="topnav">
<li><a href="index.html" class="show-mobile">Home</a></li>
<li><a href="humans/humans.html" id="nav1">Humans</a></li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li><a href="presentations.html" id="drp1">Presentations</a></li>
<li><a href="about-islam.html" id="drp2">About Islam</a></li>
<li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>Answered by Bibberty on February 8, 2021
You are using multiple quotations marks together, the parser is considering the first pair of quotation mark to me the value of the onload attribute, which is "myFunction(" and the rest are considered gibberish.
Use double quotations (") and single quotations (') together to avoid this error
onclick="myFunction('nav')">
Similarly
onclick="myFunction(" drp ")"
Answered by Aditya Priyam on February 8, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP