title: change image of img tag using innerhtml
body: <p>i want to change image using innerhtml of img tag when i click on it my code is given below</p>
  
  <pre><code>tempData +='&lt;td &gt;';
  
          tempData +='&lt;img src="'+frontImg+'" id='+ii+' onClick="flipImage(this.id);" /&gt;';//from where flipImage call
          tempData +='&lt;/td&gt;';
  </code></pre>
  
  <p>it works fine but it change image when it return form the function but i wanted to change it before <code>flipImage</code> return </p>
  
  <pre><code>    function flipImage(m)
      {
  
          var jsonLen = jsonImages.images.length;
          var imgNumber = finalImageArray[m];
          for(jsn = 0;jsn &lt;jsonLen ;jsn++)
          {
              if(jsonImages.images[jsn].imageKey== imgNumber)
              {
                  realImage = jsonImages.images[jsn].imagePath;
                  var element = document.getElementById(m);
  //              var mg = '&lt;img src="bool.jpg" /&gt;'; // change when this line execute what should i put here.?
                  //element.innerHTML=mg; want like this.
  
                         //this is actual code but it change image after returning the function  so i don't want this.
                  element.innerHTML=realImage;
              element.setAttribute('src',realImage);
              element.setAttribute('onclick', ''); 
                  break;
  
              }
          }
      }
  </code></pre>
  
  <p>so i wanted to change image before <code>flipImage</code> return.
  this is just a sample code and </p>