Почему не срабатывает classList.toggle при клике по label?

Question

[focusss]

Не вижу причину, почему toggle не срабатывает при клике на элемент. Не присваивает классы и не убирает. Ошибок нет в консоли.

let switchLabel = document.querySelector(".theme-swither");
let bodySwitch = document.getElementsByTagName("body")[0];


switchLabel.addEventListener('click', function () {
    bodySwitch.classList.toggle("active");

})

UPD. Клик происходит по label с классом theme-swither, походу тут косяк, но почему?

Comments

[v3shin]

Ошибок типа "Cannot read property 'addEventListener' of null" не выдает?

[eugeenyjoy]

а так?

let switchLabel = document.querySelector(".theme-swither");
let bodySwitch = document.querySelector("body");


switchLabel.addEventListener('click', function () {
    bodySwitch.classList.toggle("active");
})

[focusss]

v3shin, eugeenyjoy, Спасибо за помощь. Правильный ответ у 0xD34F

Answer 1

[0xD34F]

toggle не срабатывает при клике на элемент. Не присваивает классы и не убирает.

А может, всё-таки срабатывает? Дважды - сначала добавляет класс, а затем убирает.

Клик происходит по label

А внутри label'а, предположу, есть ещё какой-то элемент, input, например? Здесь возникает вопрос уже к вам: о чём вы не знаете - о всплытии событий, или что клик по label'у вызывает клик по связанному элементу?

Предположу ещё - раз переключаете класс, то input является чекбоксом. Обрабатывайте на нём событие change вместо клика по label'у.

Comments

[focusss]

Спасибо большое. Честно со всплытием у меня проблемы. Всегда забываю, как это работает. change сработал, теперь всё ок. Ну и пока со многим в js проблемы)