title: Pure Javascript- Change class of onclick element generated by function
body: <p>I'm new in coding and have been around a problem for a few days but found no solution.
  I'm trying to build a canvas with a grid made out of squares and, when a square is clicked, it changes its background color.
  I'm learning pure javascript and my problem is that I can't find a way to refer to the clicked element and change only its class, because my grid is generated by a function. I am doing it this way because I want to be able to change the canvas size in future.
  Any suggestions on how to proceed?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Square Canvas Game&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;javascript:setInitialCanvas()&quot;&gt;
      &lt;header&gt;
          &lt;h1&gt;Square artist&lt;/h1&gt;
      &lt;/header&gt;
      &lt;div id=&quot;gameInterfaceContainer&quot;&gt;
          &lt;button id=&quot;clearCanvas&quot; onclick=&quot;clearAllSquares()&quot;&gt;Clear All&lt;/button&gt;
      
          &lt;div id=&quot;canvas&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>function setInitialCanvas(){
      for (let i =0; i&lt;400; i++){
          let initialSquare = document.createElement(&quot;div&quot;);
          document.getElementById(&quot;canvas&quot;).appendChild(initialSquare);
          initialSquare.className = &quot;canvasSquare clearSquare&quot;;
          initialSquare.onclick = changeSquareColor(this);
          initialSquare.style.backgroundColor = &quot;white&quot;;
          initialSquare.id = &quot;square&quot; + i;
      }
  }
  function changeSquareColor(this){
      let squareColor = [&quot;white&quot;,&quot;blue&quot;,&quot;black&quot;,&quot;green&quot;,&quot;red&quot;,&quot;yellow&quot;,&quot;gray&quot;,&quot;brown&quot;];
      let colorIndex = 0;
  
      while (squareColor[colorIndex] != this.style.backgroundColor){
          colorIndex += 1;
      }
      if(this.style.backgroundColor == squareColor[squareColor.length]){
          this.style.backgroundColor = squareColor[0];
      }else
      colorIndex += 1;
      this.style.backgroundColor = squareColor[colorIndex];
  
  }
  
  </code></pre>
  <p>Thank you!</p>
  <p>*Edit: Adding codepen (that doesn't work) <a href="https://codepen.io/ccue92/pen/qBNKLQY" rel="nofollow noreferrer">https://codepen.io/ccue92/pen/qBNKLQY</a></p>