Блог

Я совсем новичок в javascript, и я хотел вставить меню переключения на свой веб-сайт. В Интернете я нашел этот фрагмент кода javascript, который должен быть правильным. Однако после включения всех необходимых js-css и html-элементов функция onclick() все еще не работает.

ПРИМЕЧАНИЕ: используемый файл js находится в той же папке, что и мой 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;
      }
    }

'''
 

Div, который вы используете для вызова функции onclick, пуст, поэтому он недоступен для клика, поскольку в принципе не существует. Я действительно не могу сказать, что вы пытаетесь сделать, но вы хотели бы придать div некоторую высоту и ширину, например, поместив список ul в div или определив размер div

Вариант 1:

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

Вариант 2:

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

И ПС:
в вашем js есть ошибка:

 else if (toggleNavStatus === true {
 

должно выглядеть так:

 else if (toggleNavStatus === true) {