Практикуем addEventListener и свойство classList

Давай реализуем вот такую штуку:

Лапочка освещает нам путь, но стоит ее выключить (нажать на нее), как становится темно и грустно.

К

Итак, наш план действий:

1. делаем HTML и CSS;
2. находим тег, содержащий картинку в DOM;
3. вешаем на этот тег слушатель событий addEventListener
4. меняем фон при клике

Поехали!

Делаем HTML и CSS

Картинку можно разместить двумя способами - через тег img, либо как фон тега div.

Менять фон проще, поэтому пойдем по второму пути, а потом посмотрим еще варианты.

Что бы картинка влезла полностью зададим div высоту в 100vh.

Добавляем контейнер для картинки

Теперь добавим сюда класс с включенной лапочкой

Файлики тут - https://disk.yandex.ru/d/-0REW69eSapOvg

Добавляем картинку на фон

Получим вот такую красоту

Наша прелесть

Аналогично делаем для выключенной лампочки. Не забываем про черный фон!

Добавление выключенной лампочки

Находим тег, содержащий картинку в DOM

Пора писать JS. Для начала нужно получить наш тег в JS (или если более правильно то находим DOM узел нашего тега).

Для этого можно использовать, к примеру, стандартный метод querySelector() объекта document с селектором по тегу div

Поиск элемента в DOM

Вешаем на тег слушатель событий addEventListener

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

Он работает очень просто - при событии клика (click) по области нашего дива начинает работать функция (function())

Слушаем события над объектом

Меняем фон при клике

Добрались до интересного. Здесь нам потребуется замечательное свойство .classList, которое есть у каждого элемента.

У этого свойства есть четыре метода:

1. .classList.add(”class”) - добавляет класс
2. .classList.remove(”class”) - удаляет класс
3. .classList.toggle(”class”) - добавляет если класса нет, удаляет если есть
4. .classList.contains(”class”) - проверяет есть ли класс (возвращает true|false)
5. .classList.replace("class1", "class2") - меняет один класс на другой

Здесь нам идеально подойдет toggle.

Добавление и удаление класса

Вот еще пару полезных штук, которые можно кстати делать со свойством classList. Но их используют не часто, так как не все о них помнят.

1. Можно добавить или удалить сразу несколько классов

Добавление и удаление нескольких классов

2. а еще можно добавить условие для toggle прямо в него =)

Условие для срабатывания toggle

Ну вот, и все мигает!

Для самых ленивых, весь код (а его очень-очень мало).

Весь код проекта