How to write it with one loop?

Question

JavaScript

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

Answer 1

Instead of assigning individual handlers to each element, make one delegate:

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