title: addEventListener on a querySelectorAll() with classList
body: <p>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.</p>
  <pre><code>const cbox = document.querySelectorAll(&quot;.box&quot;);
  function doit() {
    for (let i = 0; i &lt; cbox.length; i++){
      cbox[i].classList.add(&quot;red&quot;);
    }
  }
  cbox.addEventListener(&quot;click&quot;, doit, false);
  </code></pre>
  <p>Can somebody spot the mistake I make?</p>