For some reason, the menu does not open when you click on a hamburger. The browser writes: "ReferenceError: toggleMenu is not defined". Help me find a bug ..

let menu = document.getElementsByClassName('menu')[0]; function toggleMenu() { if (menu.className === "menu") { menu.className += " open"; } else { menu.className = "menu"; } } 
 .hamburger { display: none; width: 11px; height: 16px; float: right; margin: 6px; position: relative; border-top: 2px solid #fff; border-bottom: 2px solid #fff; z-index: 99; top: 23px; cursor: pointer; } .hamburger:after { content: ""; position: absolute; display: block; right: 0; left: 0; top: 5px; height: 2px; background: #fff; z-index: 99; } @media (max-width: 992px) { .hamburger { display: block; } ul { left: -200px; background: #444; position: fixed; top: 0; bottom: 0; width: 200px; transition: .2s; z-index: 999; } ul.open { left: 0; } li { display: block; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="navbar"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-2 col-4 col-sm-3"> <div> <img class="logo" src="img/logo.png" alt="Логотип"> </div> </div> <div class="col-lg-7 d-none d-lg-block"> <ul class="menu main_menu_list d-flex justify-content-center"> <li class="main_menu_list_item"> <a href="#">Главная</a> </li> <li class="main_menu_list_item"> <a href="about.html">О компании</a> </li> <li class="main_menu_list_item"> <a href="move.html">Недвижимость и переезд</a> </li> <li class="main_menu_list_item"> <a href="contacts.html">Контакты</a> </li> </ul> </div> <div class="col-lg-3 d-lg-flex col-sm-6 col-md-5 ml-auto d-sm-flex d-none align-items-center"> <div class="icon"> <img class="modal1" src="img/phone.png" alt="icon"> </div> <div class="phone"> +7 (495) 12-321-345<br> +7 (495) 12-321-345 </div> </div> <div class="hamburger col-1 ml-auto" onclick="toggleMenu();"></div> </div> </div> </nav>

  • Well, you all indicated in the error toggleMenu not defined. What do you want from us? - ArchDemon
  • I don't know js. Just starting to learn. - Roman
  • Well then study. For you, we can not study - ArchDemon
  • Just show where the error is and everything .. I have six months to learn a language that I don’t need as a frontend developer? I found a ready-made solution on the Internet, implemented it, but it does not work .. I turned to the site for help. Isn't this site created for this? - Roman

2 answers 2

I know nothing in JS, but I will answer.

 let menu = document.getElementsByClassName('menu')[0]; function toggleMenu() { if (menu.className === "menu") { menu.className += " open"; } else { menu.className = "menu"; } }

Here you specified the menu variable outside the function, besides, the function itself must be enclosed in the <script> :

 <script> function toggleMenu() { let menu = document.getElementsByClassName('menu')[0]; if (menu.className === "menu") { menu.className += " open"; } else { menu.className = "menu"; } } </script>
  • The js code is all in my js file connected to the page. but alas, nothing has changed after the editing proposed by you .. - Roman

Ummm ... why connect jQuery and write to JS? There is one problem. You have not declared when this function should be initialized.

 $(document).ready(function(){ function toggleMenu() { var menu = $('.menu') //добавь #id, на случай если класс повторится menu.toggleClass('open'); } })
  • Did not help .. Maybe bootstrap interferes with something? - Roman