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

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]

О каких элементах идёт речь: const selector = '.box';.

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

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

или

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

document.addEventListener('click', function({ target: t }) {
  if (t = this.find(n => n.contains(t))) {
    this.forEach(n => n.classList.toggle('active', n === t));
  }
}.bind([...document.querySelectorAll(selector)]));

ИЛИ

При обработке клика вместо перебора всех элементов можно получить тот, состояние которого необходимо сбросить, собрав соответствующий ему селектор:

document.querySelectorAll(selector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  document.querySelector(`${selector}.active`)?.classList.remove('active');
  this.classList.add('active');
});

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, моя задача в том чтобы получить тот код используя только один цикл
у вас есть инстаграм или телеграм?
я вам отправлю видео как должен работать код
чтобы вы поняли что я хочу получить