Почему класс добавляется и сразу удаляется?

Question

[Lara B]

Ребята, 100 раз добавляла и удаляла класс по клику, но почему сегодня он добавляется и сразу удаляется, просто мозг дымится

https://codepen.io/Lareta/pen/abOKoeq

Comments

[0xD34F]

Вы когда научитесь нормально оформлять вопросы? Вам уже не раз говорили, что размещать код в виде изображения недопустимо.

Answer 1

[Александр]

Код в песочницу можно?

UPD:
1. Получаем event и сбрасываем его.

menuToggle.addEventListener('click', function (event) {
    event.preventDefault();
    ...
});

2. this меняем на menuToggle.
3. Меняем HTML.

<button class="menu-toggle" id="menu-toggle">
    <span class="menu-toggle__span"></span>
</button>

4. Меняем CSS.

.menu-toggle {
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    z-index: 15;
}

.menu-toggle.active .menu-toggle__span {
    background-color: transparent;
}

.menu-toggle.active .menu-toggle__span:before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle.active .menu-toggle__span:after {
    transform: rotate(-45deg);
    top: 0;
}

Двойное событие происходило из-за checkbox'а внутри «кнопки».

Comments

[Lara B]

Да, Александр, как раз переносила. Сама прошу , что бы давали доступ к коду
https://codepen.io/Lareta/pen/abOKoeq

[Александр]

Lara B, Обновил овтет.

Answer 2

[Way]

Первый ответ в гугле

The simplest solution is to create the new handler only once:

var newHandle = function(event) { handle(event, myArgument); };

el.addEventListener("click", newHandle, false);