title: why 'addEventListener' only work with 'for loop'
body: <p>why 'addEventListener' only work with 'for loop'?</p>
  
  <p>my <a href="https://codepen.io/nadav-himmelfarb/pen/WyNJLp?editors=1111" rel="nofollow noreferrer">codepen</a>:</p>
  
  <p>The for loop (working):</p>
  
  <pre><code>var isPurple = false;
  
  for(var i = 0; i &lt; btn.length; i++){
   btn[i].addEventListener("click", function()
   { if(isPurple){
      document.body.style.backgroundColor = "white";
    } else {
     document.body.style.backgroundColor =    "pink"; 
   }
    isPurple = !isPurple;
  
   }); }
  </code></pre>
  
  <p>With a class (doesn't work):</p>
  
  <pre><code>btn.addEventListener("click", function(){
  document.body.classList.toggle("purple");  
  })
  </code></pre>
  
  <p>Regular class (doesn't work gives- "is not a function"):</p>
  
  <pre><code>btn.addEventListener("click", function(){
  document.body.style.backgroundColor = "pink";
  
  })
  </code></pre>
  
  <p>p.s 
  Also I don't know why but also with for loop, it only work in the codepen, if I do it in it's console.</p>