title: Change the color of clicked element with color picker
body: <p>I want to change the color of clicked element. I tried this but was not working. When users clicked on any element e.g footer then, after clicking on that element "htm5 colour picker" should appear and then users can pick the color from it and that chosen color should be applied imminently in real-time. I don't want to save on my database or use ajax + php, See my code at below </p>
  
  <p>May be we can add inline CSS using setAttribute("style", " "). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('body').click(function(event) {
    alert($(event.target).attr('class'));
    var colorWell;
    var defaultColor = "#0000ff";
  
    window.addEventListener("load", startup, false);
  
    function startup() {
      colorWell = document.querySelector("#colorWell");
      colorWell.value = defaultColor;
      colorWell.addEventListener("input", updateFirst, false);
      colorWell.addEventListener("change", updateAll, false);
      colorWell.select();
    }
  
  
    function updateFirst(event) {
  
      var p = event.target.id;
  
      if (p) {
        p.style.color = event.target.value;
      }
    }
  
    function updateAll(event) {
      document.querySelectorAll("p").forEach(function(p) {
        p.style.color = event.target.value;
      });
    }
  
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;label for="colorWell"&gt;Color:&lt;/label&gt;
  &lt;input type="color" value="#ff0000" id="colorWell"&gt;</code></pre>
  </div>
  </div>
  </p>