Javascript for opening mobile nav icon isn't working

I found a tutorial and everything went well, then the last part, which is javascript went wrong. I’m not sure what it is, he put the javascript after the body, but oter answers say thats not the correct way and it still worked for them so im not sure.
https://jsfiddle.net/niadanie/8ymg9qp6/7/

sidenote:I left the tags on the html because thats what my html currently looks like.

You are using the same script twice. It’s throwing an error because you are trying to define the same constants twice. e.g. toggleButton

In your html editor box you can remove this script block at the bottom
HTML v

  <script>
      const toggleButton = document.getElementById('toggleButton');
      const naviList = document.getElementById('navi-list');
  
      toggleButton.addEventListener('click', () => {
          naviList.classList.toggle('active');
      });
  </script>
// </body>

You have the same code in the Javascript editor box, which is automatically imported. Leave that one in.

Javascript + No-Library (pure JS) v

const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-list');

toggleButton.addEventListener('click', () => {
	naviList.classList.toggle('active');
});

It should now work.

As an aside it would make it easier to see what is going on if you tidy up your code. I did a bit of a tidy up here

<body>
  <!-- Main Wrapper -->
  <div id="wrapper">

    <header class="announcement">
      <img src="../assets/starr.png" class="starr">
      <a href="donation.html">
        <p class="atext"> we are doing a pet food drive!</p>
      </a> 
      <img src="../assets/starr.png" class="starr">
    </header>

    <!-- Main Navigation Menu -->
    <nav class="navbar">
      <div class="catright">
        <a href="index.html">
          <img src="../assets/catlogo.png" alt="cat logo" class="catlogo">
        </a>
      </div>
      <ul class="nav-list" id="navi-list">
        <li class="list-item dropdown">
          <a href="generalresourcespage.html">resources</a>
          <ul class="dropdown-content">
            <li><a href="catguide.html" class="purplehover">Cat Guides</a></li>
            <li><a href="#" class="purplehover">Sanctuary</a></li>
            <li><a href="#" class="purplehover">About Us</a></li>
          </ul>
        </li>
        <li class="list-item">
          <a href="shop.html">shop</a>
        </li>
        <li class="list-item">
          <a href="blog.html">blog</a>
        </li>
      </ul>
      <!-- Toggle Button -->
      <div class="menu" id="toggleButton">
        <div class="menu-line"></div>
        <div class="menu-line"></div>
        <div class="menu-line"></div>
      </div>
    </nav>
    <!-- Main Navigation Menu END -->

    <hr class="line">

    <main class="cathomepage">
      <div class="cathomepageinner">
        <p>Donate today u</p>
      </div>
    </main>

    <footer id="footer">
      <a>sitemap</a>
      <a class="spacemid">contact</a>
      <a>© 2022 Lets Feed These Cats </a>
      <img src="assets\ig.png" class="catstagram">
    </footer>
  </div>
  <!-- Main Wrapper END -->

  <!-- Cookies -->
  <div id="cookie-notice" style="background-color:#D7C4EE; border-color:transparent;">
    We use cookies to deliver better experience.
    <a 
       href="https://cookienotice.js.org/about-cookies" 
       class="cookie-notice-more"
       style="text-decoration: underline;" 
       target="_blank" 
       rel="noopener"
    >More info...</a>
    <a 
       href="javascript:void(0)" 
       class="cookie-notice-close"
       style="background-color:#000000d0; border:none;border-radius:2px" 
       onclick="closeCookieNotice()"
    >OK</a>
  </div>
  <script src="https://cookienotice.js.org/cookienotice.min.js"></script>
  <!-- Cookies End -->
</body>
1 Like

Thank you the html is so clean!! And The 3 line menu still won’t open, is the javascript they wrote not up to date?

In chrome, if you hover over the burger menu, right click and then click on inspect it will open the elements tab. Above that element is the navi-list element.

Go back to the burger menu and repeatedly click and you can see the active class is toggling on and off.

There is obviously more work to do with the css etc.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.