Как написать это с одним циклом?

Question

[Java Script]

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

for (let i = 0; i < elem.length; i++) {
  elem[i].addEventListener('click', function () {
    for (let x = 0; x < elem.length; x++) {
      elem[x].style.background = 'black';
    }

    elem[i].style.background = 'red';
  })
}

Comments

[edward_freedom]

а что делает второй, что не может первый?

Answer 1

[0xD34F]

Вместо назначения индивидуальных обработчиков каждому элементу сделать один делегированный:

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('box')) {
    for (const n of document.querySelectorAll('.box')) {
      n.style.background = n === t ? 'red' : 'black';
    }
  }
});

Comments

[Java Script]

А есть вариант примитивнее?
Так как я написал ток чтобы работала с одним циклом.

[WapSter]

Java Script,

for (let i = 0; i < elem.length; i++) {
  elem[i].style.background = 'red';
  elem[i].addEventListener('click', function () {
    this.style.background = 'black';
  })
}

[Java Script]

WapSter, код неправильно работает

[WapSter]

Java Script, да пожалуйста, только в ответе вариант на много проще, как в плане реализации так и в прочтении. Но стоит слегка модифицировать, так как окрасит в красный все блоки только после клика.

[Java Script]

WapSter, но оно не работает

Answer 2

[twobomb]

.box{
  background:black;
}
.box.active{
  background:red;
}

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

for (let i = 0; i < elem.length; i++) 
  elem[i].addEventListener('click', function (evt) {
    var el = document.querySelector('.box.active');
    if(el)
    	el.classList.remove("active");
     evt.target.classList.add("active");
  });

Comments

[Java Script]

Есть вариант без актива и без classList.remove?

[twobomb]

Java Script, Вообще есть вариант даже без js, ну это лучший вариант.

[Java Script]

twobomb, моя задача в том чтобы получить тот код используя только один цикл
у вас есть инстаграм или телеграм?
я вам отправлю видео как должен работать код
чтобы вы поняли что я хочу получить