0

Почему не срабатывает функция closeMenu?

const body = document.querySelector('body')
const burger = document.querySelector('.header__burger')
const burgerActive = document.querySelector('.header__burger-active')
const nav = document.querySelector('.nav')
const navActive = document.querySelector('.nav-active')

function showMenu() {
burger.classList.remove('header__burger')
burger.classList.add('header__burger-active')
nav.classList.remove('nav')
nav.classList.add('nav-active')
}
burger.addEventListener('click', showMenu)



function closeMenu() {
burgerActive.classList.remove('header__burger-active')
burgerActive.classList.add('header__burger')
navActive.classList.remove('nav-active')
navActive.classList.add('nav')
}
burgerActive.addEventListener('click', closeMenu)

Изначальная разметка:

введите сюда описание изображения

Разметка, после срабатывания функции клика showMenu: введите сюда описание изображения

Ошибки в консоли + скриншот кода введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

3
  • Добро пожаловать на Stack Overflow на русском! текстовую информацию лучше прилагать в виде текста: 1) читать легче; 2) можно копировать; 3) поиск работает. Исправить текст вопроса можно, нажав править ниже текста вопроса.
    – Simon
    23 сен 2022 в 12:23
  • Потому что элемент с классом .header__burger-active появляется только после клика на бургер. На момент когда Вы задаете константу const burgerActive = document.querySelector('.header__burger-active') такого элемента не существует.
    – Simon
    23 сен 2022 в 12:25
  • @Simon, спасибо ! я просто для наглядности прикрепил скриншоты, код также написал текстом. Или Вы что имели ввиду? Понял, однако я пробовал объявлять константу burgerActive = document.querySelector('.header__burger-active') после вызова клика и даже внутри функции closeMenu и все-равно не работает... Прошу подсказать все-таки, как правильно делать, и еще раз спасибо! p.s. как вы пишите в комментарий куски кода, подсвеченные серым цветом?
    – jenya1995
    23 сен 2022 в 14:11

1 ответ 1

2

У Вас там в целом довольно странная логика описана. Не за чем удалять класс при каждом клике и потом заменять его на другой класс, Вам просто нужно добавить/убрать на клик класс active в Вашем случае header__burger-active, nav-active и все. Для этого можно использовать element.classList.toggle().

после вызова клика и даже внутри функции closeMenu и все-равно не работает...

Мне интересно, каким образом это должно было работать, если closeMenu передается в качестве колбека в лиснер который Вы вешаете на элемент который Вы пытаетесь определить, в таком случае, внутри этого же closeMenu.

const body = document.querySelector('body')
const burger = document.querySelector('.header__burger')
const nav = document.querySelector('.nav')

function toggleMenu() {
    burger.classList.toggle('header__burger-active');
    nav.classList.toggle('nav-active');
}

burger.addEventListener('click', toggleMenu);
.nav {
    display: none;
}

.nav-active {
    display: block;
}

.header__burger-active {
    color: red;
    border: 1px solid red;
}
<div class="header_item-burger">
  <button class="header__burger">Burger button</button>
  <nav class="nav">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.