@Andreyweb30

Как при клике на элемент добавить класс всем элементам с этим же классом?

Как при клике на элемент добавить класс всем элементам с этим же классом ?
Есть пять квадратов (у них одинаковый класс)нужно при клике на один из них добавлять класс всем элементам, к примеру класс "green"
Получилось сделать только для первого элемента (при клике на первый квадрат все работает, на остальные нет)
5fb5810e51d96034893501.png
<div class="wrapper-square">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>

var elCollection = document.querySelector(".square");
    var elNodes = document.querySelectorAll(".square");

    elCollection.addEventListener("click", function(event) {
      event.preventDefault();
      elNodes.forEach((el) => {
        el.classList.toggle("green");
      });
    });

.wrapper-square{
    display: flex;
}

.square{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 100px;
    cursor: pointer;
}
.green{
    background-color: green;
}


просматривал вопросы на данную тему, но не смог разобраться, заранее спасибо за ответ
  • Вопрос задан
  • 216 просмотров
Решения вопроса 1
const elNodes = document.querySelectorAll(".square");

elNodes.forEach(el => {
el.addEventListener("click", () => {
el.classList.toggle("green");
});
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы