title: Change the color to the clicked element
body: <p>I want to change the color of the clicked div element. If I change the color with  the color is transferred to each next click div.
  How to click on the div element to change the color of that div element. First click on some div and then change color?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  html, body {
      overflow: display;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: white;
  }
  
  #some_id1{
    width: 50px;
  height: 50px;
  background-color: red;
  }
  
  #some_id2{
    width: 50px;
  height: 50px;
  background-color: red;
  }
  
  #some_id3{
    width: 50px;
  height: 50px;
  background-color: red;
  }
  
  #some_id4{
    width: 50px;
  height: 50px;
  background-color: red;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="color" id="divbackgroundcolor" onchange="myFunction()"&gt;
  &lt;div id="some_id1"&gt;&lt;/div&gt;
  &lt;div id="some_id2"&gt;&lt;/div&gt;
  &lt;div id="some_id3"&gt;&lt;/div&gt;
  &lt;div id="some_id4"&gt;&lt;/div&gt;
  &lt;div id="some_id5"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  var div = document.getElementsByTagName("div");
  var divCount = div.length;
  for (var i = 0; i &lt;= divCount; i += 1) {
      div[i].onclick = function(e) {
          var x = document.getElementById("divbackgroundcolor").value;
          document.getElementById(this.id).style.backgroundColor = x;
      };
  }
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>