CODEWITHSUNDEEP
javascripthtmlonload
Lasse Stenløs
Lasse Stenløs

Reputation: 23

Body onload function does not work with three functions

So in our school project we are creating an image gallery on web. I want to have three blocks with images, where all three blocks rotates between three images (a total of 9).

Like this [] [] [] where each block is an "image block", and in these three imageblocks the images will rotate between more images.

The thing is I found a code snippet which worked. The first answer. Link: How to change image-background after sometime?

This code worked for one of my imageblocks. So I copyed the function and changed the function name, and it worked for two of them. Now I did exactly the same thing with the third, but then the image rotation stops on all three.

It says . Then it stops. If I remove one of the three "changeimage"s, it will work, and two will rotate, but when all three are there, none of them work.

Anyone wants to recreate my problem?

My HTML (Very short version, note that imglinks are not the real links, but a sample):

<body onload='changeimage(2); changeimage2(2); changeimage3(2);'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

My javascript is exactly the same as in the link, except that I copyed and pasted it three times, and changed the name of the functions to what is in onload in the code snippet. I changed the myimage id, the function name in set time out and the image sources.

Everything works just fine. But when I use all three of them at the same time it wont work. Two of them will work together no matter which two, but all three wont work at the same time.

TLDR; wont work together, but two and one by themselves will.

Any suggestions? :) Ask if you didnt understand and I will try to explain even better.

Upvotes: 0

Views: 861

Answers (3)

Pudge601
Pudge601

Reputation: 2068

From looking at that code you've linked to, my immediate guess is that you haven't redeclared the imageID variable for each function to have its own, that could be causing issues.

However, I should note that redeclaring the function as you've described is the wrong way to go about this - the whole point of a function is that the code is reusable, and so you don't have to re-write it. As suggested by Daniel, using an additional parameter for the image DOM id is the best way to solve that problem.

I've re-written the function here with the logic improved slightly and allowed for re-use of the function:

http://jsfiddle.net/Ebp75/

Upvotes: 0

bastos.sergio
bastos.sergio

Reputation: 6764

The function you posted depends on an external variable "imageID". If you duplicated the function 3 times, then you need to duplicate the external variable too.

Example bellow:

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID2=0;
function changeimage2(every_seconds){
    //change the image
    if(!imageID2){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID2++;
    }
    else{if(imageID2==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID2++;
    }else{if(imageID2==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID2=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID3=0;
function changeimage3(every_seconds){
    //change the image
    if(!imageID3){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID3++;
    }
    else{if(imageID3==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID3++;
    }else{if(imageID3==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID3=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>

Upvotes: 1

Daniel
Daniel

Reputation: 2362

I am not so sure whether the problem is that onload can contain a list of functions to call or whether rather something in your script (which is missing here) is wrong. In any case, having a list of function in the onLoad seems not to be a good practice. I would write one dedicated function that handles onLoad and call those 3 functions from there.

So the html would look like this

<body onload='onLoadHandler()'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

Your script would then look like this: 

function onLoadHandler(){
  changeimage(2); 
  changeimage2(2); 
  changeimage3(2);
}

// rest of your script
</script>

Further I would assume that having three changeimage functions is unessecary. They probably do three times almost the same just for different images. So in a next step I would reduce them to one single function, and pass the changing part as parameter to the function. Something like this.

<script type='text/javascript'>

function onLoadHandler(){
  changeimage(2,'myimage'); 
  changeimage(2,'myimage2'); 
  changeimage(2,'myimage3'); 
}

function changeimage(numberParameter, imageId){
   // your logic usining imageId instead of a fixed, hardcoded id

}

</script>

Upvotes: 0

Related Questions