title: Programmatically change the src of an img tag
body: <p>How can I change the <code>src</code> attribute of an <code>img</code> tag using javascript?</p>
  <pre><code>&lt;img src=&quot;../template/edit.png&quot; name=&quot;edit-save&quot; alt=&quot;Edit&quot; /&gt;
  </code></pre>
  <p>at first I have a default src which is &quot;../template/edit.png&quot; and I wanted to change it with &quot;../template/save.png&quot; onclick.</p>
  <p>UPDATED:
  here's my html onclick:</p>
  <pre><code>&lt;a href=&quot;#&quot; onclick=&quot;edit()&quot;&gt;&lt;img src=&quot;../template/edit.png&quot; id=&quot;edit-save&quot; alt=&quot;Edit&quot; /&gt;&lt;/a&gt;
  </code></pre>
  <p>and my JS</p>
  <pre><code>function edit()
  {   
      var inputs = document.myform;
      for(var i = 0; i &lt; inputs.length; i++) {
          inputs[i].disabled = false;
      }
  }
  </code></pre>
  <p>I've tried inserting this inside the edit(), it works but need to click the image twice</p>
  <pre><code>var edit_save = document.getElementById(&quot;edit-save&quot;);
      edit_save.onclick = function(){
         this.src = &quot;../template/save.png&quot;;
      }
  </code></pre>