TransWikia.com

Why is JavaScript function not opening hamburger menu?

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>

2 Answers

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP