title: JS function on multiple pages
body: <p>Working on a website for a school project and trying to incorporate some JavaScript.</p>
  
  <p>I have a list of four functions and each function is for a different page. They are all the same function just with different arguments because it is a photo gallery with different photos for each page. However, I can only get the last one that is in the JS file to work and the first three that are listed are not clickable. Here is my code:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
     &lt;div id="big_img"&gt;
        &lt;img src="Images/Ian-1.jpg" width="920" height="400" id="myPicture"  class="border" /&gt;
     &lt;/div&gt;
  
     &lt;div class="thumbnail-inner"&gt;
        &lt;img src="Images/Faith-1.jpg"   id="Faith-1"/&gt;
        &lt;img src="Images/Faith-2.jpg"   id="Faith-2"/&gt;
        &lt;img src="Images/Faith-3.jpg"   id="Faith-3"/&gt;
        &lt;img src="Images/Faith-4.jpg"   id="Faith-4"/&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>java:</p>
  
  <pre><code>window.onload = gallery;
  function gallery(){
   var allimages = document.images;
   for(var i=0; i&lt;allimages.length; i++){
        if(allimages[i].id.indexOf("Faith") &gt; -1){
             allimages[i].onclick = imgChanger;
        }
   }
  }
  function imgChanger(){
   document.getElementByid('.myPicture').src ="Images/"+this.id+".jpg";
  }
  
  window.onload = gallery;
  function gallery(){
   var allimages = document.images;
   for(var i=0; i&lt;allimages.length; i++){
        if(allimages[i].id.indexOf("Ian") &gt; -1){
             allimages[i].onclick = imgChanger;
        }
   }
  }
  
  function imgChanger(){
   document.getElementById('myPicture').src ="Images/"+this.id+".jpg";
  }
  
  window.onload = gallery;
  function gallery(){
   var allimages = document.images;
   for(var i=0; i&lt;allimages.length; i++){
        if(allimages[i].id.indexOf("Dan") &gt; -1){
             allimages[i].onclick = imgChanger;
        }
   }
  }
  function imgChanger(){
   document.getElementsId('myPicture').src ="Images/"+this.id+".jpg";
  }
  
  window.onload = gallery;
  function gallery(){
   var allimages = document.images;
   for(var i=0; i&lt;allimages.length; i++){
        if(allimages[i].id.indexOf("Sum") &gt; -1){
             allimages[i].onclick = imgChanger;
        }
   }
  }
  
  function imgChanger(){
   document.getElementById('myPicture').src ="Images/"+this.id+".jpg";
  }
  </code></pre>