Why is JavaScript function not opening hamburger menu?

user_14537880 0
Viewed 74

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>

html javascript
2 Answers

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 ")"

user_71904880

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>

user_107879000
Related