title: Empty value displayed for div background color
body: <p>I have the following code to listen to click events on div elements. <br><br>
  HTML:</p>
  
  <pre><code> &lt;div id="container"&gt;
      &lt;div id="1" class="square"&gt;&lt;/div&gt;
      &lt;div id="2" class="square"&gt;&lt;/div&gt;
      &lt;div id="3" class="square"&gt;&lt;/div&gt;
      &lt;div id="4" class="square"&gt;&lt;/div&gt;
      &lt;div id="5" class="square"&gt;&lt;/div&gt;
      &lt;div id="6" class="square"&gt;&lt;/div&gt;
      &lt;div id="7" class="square"&gt;&lt;/div&gt;
      &lt;div id="8" class="square"&gt;&lt;/div&gt;
      &lt;div id="9" class="square"&gt;&lt;/div&gt;
      &lt;div id="10" class="square"&gt;&lt;/div&gt;
      &lt;div id="11" class="square"&gt;&lt;/div&gt;
      &lt;div id="12" class="square"&gt;&lt;/div&gt;
      &lt;div id="13" class="square"&gt;&lt;/div&gt;
      &lt;div id="14" class="square"&gt;&lt;/div&gt;
      &lt;div id="15" class="square"&gt;&lt;/div&gt;
      &lt;div id="16" class="square"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  JavaScript:</p>
  
  <pre><code>document.getElementById("container").addEventListener("click",function(e) { 
  if (e.target &amp;&amp; e.target.matches("div"))
  {
      console.log("Square element clicked!");
  
      SquareBackground=this.style.backgroundColor;
      console.log(SquareBackground);
      SquareId=this.getAttribute('id');
      console.log(SquareId);
  }
  });
  </code></pre>
  
  <p>I have created an array for setting the background color of the div elements and the code works properly in the browser. When I click on any square divs, I am getting the "Square Element clicked" message. However, when I try to print the background color of the clicked div, I am getting an empty value in the console. Also, for the second output, I am getting "container" instead of the id of the clicked div. Please help.</p>
  
  <p>EDIT:
  This function is used to set the background color for the squares. The array combinedColors[] contains randomly generated RGB values eg. rgb(255,0,9).</p>
  
  <pre><code>function changeSquareColor()
  {
      for(i=0;i&lt;squares.length;i++)
      {
          squares[i].style.backgroundColor=combinedColors[i];
      }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .square{
          width: 20%;
          background: blue;
          float:left;
          padding-bottom: 20%;
          margin: 1.66%;
      }
  
  body{
      background-color: black;
  }
  
  #container{
  
      margin: 20px auto;
      width: 600px;
  };
  </code></pre>