title: How to change an img src with javascript?
body: <p>I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the <code>pic</code> variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.</p>
  
  <p>--- THE REAL QUESTION ----</p>
  
  <p>I would like the image to change its src to another one that I have in my workspace with the click of a button.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" /&gt; 
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var pic = document.getElementById('pic');
  
  function rouge() {
      pic.src = "images/link_rouge.png";
  }
  
  function blue() {
      pic.src = "images/link_blue.png";
  }
  </code></pre>
  
  <p>I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.</p>