Rather than iterate through multiple elements and attach a lot of separate listeners, I would recommend using [event delegation][1] and creating a **single delegated listener** at the root level, and then looking for matching elements that raised the event.

```js
document.body.addEventListener("click", function(e) {
  if (e.target.classList.contains("box")) {
    doit();
  }
})
```

### Further Reading

* [`window.EventTarget.prototype.addDelegatedListener`][2]
* [Adding click event listener to elements with the same class][3]
* [addEventListener on NodeList][4]

[1]: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation
[2]: https://stackoverflow.com/a/55384108/1366033
[3]: https://stackoverflow.com/q/21700364/1366033
[4]: https://stackoverflow.com/q/12362256/1366033

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?

