addEventListener on a querySelectorAll() with classList

I am trying to add an event listener but no result came. I know JavaScript has a hoisting feature but I believe I tried all except the correct solution.

const cbox = document.querySelectorAll(".box");
function doit() {
  for (let i = 0; i < cbox.length; i++){
    cbox[i].classList.add("red");
  }
}
cbox.addEventListener("click", doit, false);

Can somebody spot the mistake I make?

Rather than iterate through multiple elements and attach a lot of separate listeners, I would recommend using event delegation and creating a single delegated listener at the root level, and then looking for matching elements that raised the event.

document.body.addEventListener("click", function(e) {
  if (e.target.classList.contains("box")) {
    doit();
  }
})

Further Reading

• window.EventTarget.prototype.addDelegatedListener
• Adding click event listener to elements with the same class
• addEventListener on NodeList