title: Can I have two external .js scripts in one html page?
body: <p>I have two different functions that I want to work on the same html page. Both are changing two different images onclick.  I have the javascript in an external file.  The script calling the .js file is in the head of the html, although I also tried in the body unsuccessfully.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;img id="avoir" onclick="changeImage()" src="images/avoir.gif" width="700" height="394"&gt;
  &lt;img id="aller" onclick="changeImage()" src="images/aller.gif" width="700" height="394"&gt;
  </code></pre>
  
  <p>Here is the link to the .js file:</p>
  
  <pre><code>&lt;script src="avoir.js"&gt;&lt;/script&gt;
  &lt;script src="aller.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the code in the .js file:
  for the first image:</p>
  
  <pre><code>$(document).ready(function changeImage() {
    var image = document.getElementById('aller');
    if (image.src.match("allerchart")) {
      image.src = "images/aller.gif";
    } else {
      image.src = "images/allerchart.gif";
    } 
  }
  </code></pre>
  
  <p>For the second image:</p>
  
  <pre><code>$(document).ready(function changeImage() {
    if (image.src.match("avoirchart")) {
      image.src = "images/avoir.gif";
    } else {
      image.src = "images/avoirchart.gif";
    }
  }
  </code></pre>
  
  <p>I am a web developer student and not too familiar with javascript. What is currently happening is that the second image changes on click, and nothing happens to the second one.
  Thanks for any suggestions.</p>