Смена цвета фона по нажатию на блок

let elem1 = document.querySelectorAll('.box'); 
 
elem1.forEach(function(document) { 
  document.addEventListener("click", function() { 
    this.style.backgroundColor="black";  
  }); 
});

.box { 
  margin: 10px; 
  display: inline-block; 
  width: 100px; 
  height: 100px; 
  border: 1px solid black; 
}

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div><br> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div>

[...document.querySelectorAll('.box')].forEach((s) => { 
  s.addEventListener('click', function() { 
    [...document.querySelectorAll('.box')].forEach((s) => { 
      s.classList.remove('black'); 
    }); 
    s.classList.contains('black') ? s.classList.remove('black') : s.classList.add('black'); 
  }); 
});

.black { 
  background: black; 
} 
 
.box { 
  margin: 10px; 
  display: inline-block; 
  width: 100px; 
  height: 100px; 
  border: 1px solid black; 
}

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div><br> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div>

var foo = document.querySelectorAll("div"); 
 
for(var i = 0; i < foo.length; i++) { 
  foo[i].addEventListener("click", (e) => { 
    e.currentTarget.style.background = "red"; 
  }); 
}

div { 
  border: 1px solid black; 
  width: 50px; 
  height: 50px; 
  margin: 10px; 
}

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div>