title: Changing the style of a div element on clicking is not working
body: <p>I want to change the style of my smallSquare element when I click on it. I've tried with addEventListener and the onclick method, but none of them is working for me.
  Thanks in advance for any help.
  See my code below:</p>
  <pre><code>//Create the sudoku grid
  createBigSquares();
  createSmallSquares();
  
  
  function createBigSquares(){
      const gameBoard = document.getElementById(&quot;board&quot;);
      for (let index=0; index&lt;9; index ++){
          let bigSquare = document.createElement(&quot;div&quot;);
          bigSquare.classList.add(&quot;big_square&quot;);
          bigSquare.setAttribute(&quot;id&quot;, index+1);
          gameBoard.appendChild(bigSquare);
      }
  }
  function createSmallSquares(){
      for (let index=0; index&lt;9; index ++){
          const bigSquare = document.getElementById(index + 1);
          for (let i=0;i&lt;9; i ++){
              let smallSquare = document.createElement(&quot;div&quot;);
              smallSquare.classList.add(&quot;small_square&quot;);
              const line = 3*Math.floor(index/3)+Math.floor(i/3)+1;
              const col = (index%3)*3+i%3+1;
              const smallSquareId = String(line)+&quot;,&quot;+String(col);
              smallSquare.setAttribute(&quot;id&quot;,smallSquareId);
              bigSquare.appendChild(smallSquare);
          }
      }
  }
  
  const smallSquarus = document.getElementsByClassName(&quot;small_square&quot;);
  //console.log(smallSquarus);
  
  //smallSquarus.onclick=()=&gt;{
      //smallSquarus.classList.add('highlight');
  //}
  
  
  smallSquarus.addEventListener(&quot;click&quot;,function(){
      smallSquarus.classList.add('highlight');
  })
  </code></pre>