Как поменять цвет нескольких дивов с помощью OnClick в JS?

Question

[Java Script]

У меня есть 4 дива, и я должен сделать так, чтобы при нажатии на одного поменялся цвет, а когда я нажму на другой из этих дивов, цвет первого стало прежним, а этот поменял цвет.
То есть, чтобы из этих дивов только один смог поменять цвет, а не все одновременно.
Да и задача в том, чтобы написать простой примитивный код со знаниями новичка.
Это мой изначальный код:
HTML содержит 4 блока дива с классом box
Это мой CSS:

.box {
    width: 200px;
    height: 200px;
    background-color: black;
    transition: all .3s linear;
    display: inline-block;
}

А это JS:

const elem = document.querySelector('.box');

elem.addEventListener ('click', () => {
    elem.style.backgroundColor = 'red';
})

Comments

[Арсений Матыцин]

Оформи код нормально. codepen.io

Answer 1

[Тигран Абрамян]

Comments

[Java Script]

Спасибо большое но есть вариант без .active и remove?

[Максим]

E_Melqonyan, https://codepen.io/topicstarter/pen/vYNWxyN так ?

[Тигран Абрамян]

Максим Ленский,

написать простой примитивный код со знаниями новичка.

думаю он вообще такое хотел

for (let i = 0; i < divs.length; i++) {

  divs[i].addEventListener("click", function() {

    for (let d = 0; d < divs.length; d++) {
      divs[d].classList.remove("active");
    }

    divs[i].classList.add("active");
  })

}

примитивней никуда

[Максим]

TAbrahamyan, он же видишь как - хочет без active и classlist

[Тигран Абрамян]

Максим Ленский, а, так он коммент изменил, я не видел

[Java Script]

Максим Ленский, если можно обьясните кратко как работает этот код?

[Максим]

E_Melqonyan, что именно как работает ?

[Java Script]

Максим Ленский, JS код
цикл который ты создал

[Максим]

E_Melqonyan, аа...там же функция - в ней буквы от которые рандомно пересобираются и умножаются на количество бит - HEX и подставляется это функция при клике а до этого цвет красный стоит

[Java Script]

Максим Ленский, TAbrahamyan, Большое спасибо за помощь