Onclick event is not working despite correct <script></script>

Question

I am quite new to javascript and I wanted to insert a toggle menu to my website. On the internet I found this piece of javascript code that should be correct. However, after including all the necessary js-css and html-elements the onclick funtion() is still not working.

NB: the js file used is in the same folder as my index.html

HTML:

''''
    <nav class="nav-main">
        <div class="btn-toggle-nav" onclick="toggleNav()"></div>
        <ul>
          <li><a href="#">A</a></li>
          <li><a href="#">B</a></li>
          <li><a href="#">C</a></li>
          <li><a href="#">D</a></li>
        </ul>
      </nav>
    
      <aside class="nav-sidebar">
        <ul>
          <li><span>overzicht</span></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </aside>
      <script src="main.js"></script>

'''

js:

'''

    let toggleNavStatus = false;
    
    let toggleNav = function() {
      let getSidebar = document.querySelector(".nav-sidebar");
      let getSidebarUl = document.querySelector(".nav-sidebar ul");
      let getSidebarTitle = document.querySelector(".nav-sidebar span");
      let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
    
      if (toggleNavStatus === false) {
        getSiderbarUl.style.visibility = "visible";
        getSidebar.style.width = "272px";
        getSidebarTitle.style.opacity = "0.5";
    
      let arrayLength = getSidebarLinks.length;
      for (let i = 0; i < arrayLength; i++) {
        getSidebarLinks[i].style.opacity = "1";
      }
    
      toggleNavStatus = true;
      }
    
      else if (toggleNavStatus === true {
        getSidebar.style.width = "50px";
        getSidebarTitle.style.opacity = "0.5";
    
      let arrayLength = getSidebarLinks.length;
      for (let i = 0; i < arrayLength; i++) {
        getSidebarLinks[i].style.opacity = "0";
      }
    
      getSidebarUl.style.visibility = "hidden";
    
      toggleNavStatus = false;
      }
    }

'''

You are missing a closing parentheses here: } else if (toggleNavStatus === true) { I added it right after true. — Rob Moll
– Rob Moll, Commented Jul 22, 2021 at 19:14
Many thanks for your fast suggestions! However it didn't do the trick. Do you maybe have any other ideas? — Willem7
– Willem7, Commented Jul 22, 2021 at 20:10

Marsimplodation · Accepted Answer · 2021-07-22 19:53:22Z

1

The div you are using for calling the onclick function is empty, so it is not clickable, because it is basicly not existing. I can't really tell what you are trying to do, but you would want to give the div some height and width, by for example putting the ul list into the div or defining the size of the div

Option1:

<nav class="nav-main">
  <div class="btn-toggle-nav" onclick="toggleNav()">
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
  </div>
</nav>

Option2:

<nav class="nav-main">
  <div style="width: 100px; height: 30px;" class="btn-toggle-nav" onclick="toggleNav()"></div>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
  </div>
</nav>

And PS: there is an error in your js:

else if (toggleNavStatus === true {

should look like this:

else if (toggleNavStatus === true) {

answered Jul 22, 2021 at 19:53

Marsimplodation

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Willem7 Over a year ago

Thanks for your suggestions, I have now added a closing parenthesis. Sadly it is still not working. Despite the fact that I did not add any css code in my question, but the div is actually clickable since I have already made a menu icon of it. Do you have maybe any other suggestions?

Marsimplodation Over a year ago

do you get any errors in your web console? if yes, can you share them with us?

Collectives™ on Stack Overflow

Onclick event is not working despite correct <script></script>

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related