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

Question

[Andreyweb30]

Как при клике на элемент добавить класс всем элементам с этим же классом ?
Есть пять квадратов (у них одинаковый класс)нужно при клике на один из них добавлять класс всем элементам, к примеру класс "green"
Получилось сделать только для первого элемента (при клике на первый квадрат все работает, на остальные нет)

<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;
}

просматривал вопросы на данную тему, но не смог разобраться, заранее спасибо за ответ

Answer 1

[Валерия Сергеева]

const elNodes = document.querySelectorAll(".square");

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

Comments

[Andreyweb30]

Спасибо но это не много не то , ваш код при клике меняет только цвет одного квадрата (а нужно что б при клике на любой из квадратов добавлялся класс сразу всем квадратам)

[DanKud]

const elNodes = document.querySelectorAll('.square');

elNodes.forEach(n => {
    n.addEventListener('click', () => {
        elNodes.forEach(el => {
            el.classList.toggle('green');
        });
    });
});

[Andreyweb30]

DanKud, Спасибо все работает