Почему в JS не срабатывает toggle?

Question

[Капитан Какао]

ВОПРОС #1

Есть простой переключатель, по клику он должен смещаться влево, по повторному клику обратно вправо.
Что я делаю не так, почему toggle не срабатывает при клике по элементу?


ВОПРОС #2
Я только учу JS, подскажите как повесить клик на элемент без вмешательства в HTML?

ВОПРОС #3
Как написано в learn.javascript.ru, в правильном коде каждая функция должна делать только 1 действие.
Но в этой функции их несколько:
1. получить элемент
2. повесить событие клик
3. задействовать смену класс
Я думаю не стоит делить функцию аж на 3 отдельных, ведь эти 3 шага по сути работают над одной общей задачей?

Answer 1

[Александр]

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

let switchItem = document.querySelector('.switch-item');

switchItem.addEventListener('click', event => {
	event.preventDefault();
  switchItem.classList.toggle('on');
});

Вопрос 3. Имеется ввиду одно действие не в том смысле, что это одна инструкция. Имеется ввиду, что если функция должна переключить класс у элемента, то это она и должна делать, а не такое поведение, что она начинает вызывать другие функции, которые приведут к тому, чего разработчик не будет ожидать.

Comments

[Капитан Какао]

Большое спасибо за развёрнутый ответ!

[Капитан Какао]

Александр а если на странице много одинаковых переключателей, и мне нужно добавлять класс тому по которому я кликаю. Как быть тогда?
Использовать querySelectorAll для родителя и после для дочернего элемента по которому будет клик querySelector?

Попробовал сделать так, не работает чёт(

[Капитан Какао]

О, а так заработало)

Answer 2

[WapSter]

Как написано в learn.javascript.ru, в правильном коде каждая функция должна делать только 1 действие.

у тебя пока onclick в html коде можешь даже не заморачиваться.

querySelectorAll возвращает коллекцию элементов, у этой коллекции нет свойства classList