You can use forEach
on the class or use Event delegation.
const cboxes = document.querySelectorAll(".box");
function doit() {
... do something ...
}
cboxes.forEach(
function(cbox) {
cbox.addEventListener("click", doit,false);
}
);
Notice that I changed your variable name.
EventDelgation
HTML:
<div id="parent">
<div id="box1" class="box box1">
<h3>Box 1</h3>
</div>
<div id="box2" class="box box2">
<h3>Box 2</h3>
</div>
<div id="box3" class="box box3">
<h3>Box 3</h3>
</div>
<div id="box4" class="box box4">
<h3>Box 4</h3>
</div>
</div>
The JS part:
const parent = document.querySelector("#parent");
parent.addEventListener('click', (e) => {
e.target.classList.add('red');
console.log(e.target);
});
Event delegation is much better and it uses fewer resources, as you only use 1 Event listener and no for loop.