[SOLVED] multiple onLoad functions

rbragg · October 1, 2007

I have a 2 functions that I need to load in the body tag. I have read that you should separate them with a semi-colon but this is not working for me:

<script>
function cycle()
{
document.banner.src = imgArray[index].src;
index ++;
if (index == 4)
{
	index = 0;
}
setTimeout("cycle()",2000);
return;
} 

function randomSelect()
{
index = Math.floor(Math.random() * 4);
document.banner.src = imgArray[index].src;
setTimeout("randomSelect()",2000);
return;
}
</script>
</head>

<body onLoad="cycle();randomSelect()">

Any suggestions? Thanks.

fenway · October 1, 2007

First, it's onload, not onLoad.

Second, prove that you're not getting into the functions with an alert().

Third, you can always write a 3rd function that calls both.

rbragg · October 1, 2007

Thanks for your reply. I am a PHP person and typically stay away from JS. However, I'm taking a class that requires its use. A textbook uses <BODY onLoad="blahblah">.

I have added alerts:

function cycle()
{
document.banner.src = imgArray[index].src;
index ++;
if (index == 4)
{
	index = 0;
}
setTimeout("cycle()",2000);
return;

alert ("running cycle")
} 

function randomSelect()
{
index = Math.floor(Math.random() * 4);
document.banner.src = imgArray[index].src;
setTimeout("randomSelect()",2000);
return;

alert ("running randomSelect")
}

But, I don't get alerts on page load.

emehrkay · October 1, 2007

onload = function(){//suedo function fenway talked about

func();

funcN();

};

rbragg · October 1, 2007

Of course, I have also tried changing onLoad to onload and it does not help.

emehrkay · October 1, 2007

take it out of the body tag and place what i wrote in the script tag

rbragg · October 1, 2007

I did the 3rd function that calls both and it still doesn't work. :-[

function functions()
{
function cycle()
{
	document.banner.src = imgArray[index].src;
	index ++;
	if (index == 4)
	{
		index = 0;
	}
	setTimeout("cycle()",2000);
	return;

	alert ("running cycle")
} 

function randomSelect()
{
	index = Math.floor(Math.random() * 4);
	document.banner.src = imgArray[index].src;
	setTimeout("randomSelect()",2100);
	return;

	alert ("running randomSelect")
}
}

</script>
</head>

<body onload="functions()">

fenway · October 1, 2007

Don't put the alert() after the return... ;-(

rbragg · October 1, 2007

Ok, I put the alert before the return and I don't have any messages.

emehrkay · October 1, 2007

remove the onload from the body and just do

onload = function(){

//place your functions here

};

rbragg · October 1, 2007

Thanks! But that doesn't work either.

I have made SOME progress of my own ... although now both are functioning as the second function would.

function cycle()
{
document.bannerCycle.src = imgArray[index].src;
index ++;
if (index == 4)
{
	index = 0;
}
setTimeout("cycle()",2000);
return;
} 

function select()
{
index = Math.floor(Math.random() * 4);
document.bannerRandom.src = imgArray[index].src;
setTimeout("select()",2000);
return;
}

<body onLoad="cycle();select()">

<h2>My Cycling Banner</h2>
<img name="bannerCycle" src="images/1.gif">

<h2>My Random Images</h2>
<img name="bannerRandom" src="images/1.gif">

emehrkay · October 1, 2007

try this, i made it an object for better control


var banner = {
    imgArry: //place your array here
    ban:    document.getElementById('bannerid'),
    index:  0,
time_limit: 2000,

    select: function(){
        this.index = Math.floor(Math.random() * 4);
        this.ban.src = this.imgArray[this.index].src;
        setTimeout("banner.cycle()",this.time_limit);
        return this;
    },

    cycle: function(){
        this.ban.src = this.imgArray[this.index].src;
        if(++this.index == (this.imgArray.length - 1)) this.index = 0;
        setTimeout("banner.select()",this.time_limit);
        return this;
    }
};

window.onload = banner.select();

emehrkay · October 2, 2007

just looked at this again and cleaned up the code a lot

var banner = {
    imgArry: //place your array here
    ban:    document.getElementById('bannerid'),
    index:  0,
    time_limit: 2000,

    start: function(){
        this.index = Math.floor(Math.random() * 4);
        banner.cycle();
    },

    cycle: function(){        
        this.ban.src = this.imgArray[this.index].src;
        if(++this.index == (this.imgArray.length - 1)) this.index = 0;
        setTimeout("banner.cycle()",this.time_limit);
    }
};

window.onload = banner.start();

rbragg · October 2, 2007

Thanks for that emehrkay! That would be great in any other case. Like I said, unfortunately, this is for a class so I can't really overhaul the structure and would have to follow the guidelines of the textbook. The script is done exactly as asked - just not functioning as asked.

fenway · October 2, 2007

Thanks for that emehrkay! That would be great in any other case. Like I said, unfortunately, this is for a class so I can't really overhaul the structure and would have to follow the guidelines of the textbook. The script is done exactly as asked - just not functioning as asked.

So where do you stand with your code right now?

rbragg · October 2, 2007

Hi again, fenway!

<script>
var imgArray = new Array(4);
imgArray[0] = new Image;
imgArray[0].src = "images/1.gif";
imgArray[1] = new Image;
imgArray[1].src = "images/2.gif";
imgArray[2] = new Image;
imgArray[2].src = "images/3.gif";
imgArray[3] = new Image;
imgArray[3].src = "images/4.gif";
var index = 0;

function cycle()
{
document.bannerCycle.src = imgArray[index].src;
index ++;
if (index == 4)
{
	index = 0;
}
setTimeout("cycle()",2000);
return;
} 

function selectRandom()
{
index = Math.floor(Math.random() * 4);
document.bannerRandom.src = imgArray[index].src;
setTimeout("selectRandom()",2000);
return;
}

</script>
</head>

<body onLoad="cycle();selectRandom()">

<center>
<h2>My Cycling Banner</h2>
<img name="bannerCycle" src="images/1.gif">

<h2>My Random Images</h2>
<img name="bannerRandom" src="images/1.gif">

fenway · October 2, 2007

And what does it do now?

rbragg · October 2, 2007

Sorry! This may be the easiest way:

http://69.93.234.34/~austinm/digital_commerce/lesson6/js-eight.html

You'll see how out of order they are (they = 1st & 2nd banners).

emehrkay · October 2, 2007

ignore what i originally wrote here, while correct it doesnt relate to what you are doing.

emehrkay · October 2, 2007

Sorry! This may be the easiest way:

http://69.93.234.34/~austinm/digital_commerce/lesson6/js-eight.html

You'll see how out of order they are (they = 1st & 2nd banners).

they are out of order because you do a rand to get the initial index...

rbragg · October 2, 2007

If I don't onload selectRandom() by just doing

My 1st & 3rd banner works but not the 2nd.

*EDITED* to say, I just read your edit. So, I wonder how I get around the rand problem.

rbragg · October 2, 2007

Maybe I should build 2 different arrays?

rbragg · October 2, 2007

Ok, thanks for the tipoff to the index var. I've just solved it by using 2 different vars. Again, thanks all!

Sign In

[SOLVED] multiple onLoad functions

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information