title: Changing the background of the image on click
body: <p>I have an image for which I need to change the background onclick. I used following javascript and html to do the thing. For simplicity I first preferred red background and for the reference image is with transparent background.</p>
  
  <p>Code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;iframe id="myframe" src="img-thing.png"&gt;&lt;/iframe&gt;
  
  &lt;p&gt;Click the button to change the background color of the picture contained in the iframe.&lt;/p&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  
  &lt;script&gt;
  function myFunction()
  {
  var x = document.getElementById("myframe");
  var y = (x.contentWindow || x.contentDocument);
  
  y.body.style.backgroundColor="red";
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know there might be something wrong to use iframe here so i tried :</p>
  
  <pre><code>&lt;div id="myframe"&gt;&lt;img src="img-thing.png"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>instead of the iframe. If I remove the src field from the iframe tag it works fine. But when I insert image and click try now it does not work. Please help.</p>