JS function on multiple pages

Question

Working on a website for a school project and trying to incorporate some JavaScript.

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:

html:

<div class="wrapper">
   <div id="big_img">
      <img src="Images/Ian-1.jpg" width="920" height="400" id="myPicture"  class="border" />
   </div>

   <div class="thumbnail-inner">
      <img src="Images/Faith-1.jpg"   id="Faith-1"/>
      <img src="Images/Faith-2.jpg"   id="Faith-2"/>
      <img src="Images/Faith-3.jpg"   id="Faith-3"/>
      <img src="Images/Faith-4.jpg"   id="Faith-4"/>

   </div>
</div>

java:

window.onload = gallery;
function gallery(){
 var allimages = document.images;
 for(var i=0; i<allimages.length; i++){
      if(allimages[i].id.indexOf("Faith") > -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<allimages.length; i++){
      if(allimages[i].id.indexOf("Ian") > -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<allimages.length; i++){
      if(allimages[i].id.indexOf("Dan") > -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<allimages.length; i++){
      if(allimages[i].id.indexOf("Sum") > -1){
           allimages[i].onclick = imgChanger;
      }
 }
}

function imgChanger(){
 document.getElementById('myPicture').src ="Images/"+this.id+".jpg";
}

Trying to add this above my html but it wont show for some reason. <div class="wrapper"> <div id="big_img"> <img src="Images/Ian-1.jpg" width="920" height="400" id="myPicture" class="border" /> </div> — Ihowe1
– Ihowe1, Commented Dec 9, 2015 at 1:55

synthet1c · Accepted Answer · 2015-12-09 02:26:54Z

1

If all the script is in the same file or scope you will be overwriting the functions everytime you declare them. either change their name to something unique or use arguments to modify the function.

function gallery( name ){
 var allimages = document.images;
 for(var i=0; i<allimages.length; i++){
        // check the name is in the image id property
      if(allimages[i].id.indexOf( name ) > -1){
            // I change this to addEventListener
           allimages[i].addEventListener('click', imgChanger, false);
      }
 }
}

// you should anly need one image changer for the main window.
function imgChanger(e){
    // in here e is injected into the function. it contains your event data
    // e.target is used to get the element that fired the event
    // document.getElementById('myPicture').src ="Images/"+this.id+".jpg";
    // below is more concise
    document.getElementById('myPicture').src = this.src;
}

gallery('Dan'); // pass in the name
gallery('Ian'); // pass in the name

edited Dec 9, 2015 at 2:26

answered Dec 9, 2015 at 2:09

synthet1c

6,3124 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ihowe1 Over a year ago

Thank you! Much appreciated!

Collectives™ on Stack Overflow

JS function on multiple pages

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related