Link to home
Start Free TrialLog in
Avatar of Allen Pitts
Allen PittsFlag for United States of America

asked on

Javascript window onload

Hello Expert,

I have two JavaSscripts in the same html
file that want to use window.onload
Code copied below. But I guess one can only
use window.onload once per page. (Actually
thatmakes since because the pager is only loaded
once.)
So one will work but the other won't.

Is there a better way of calling the function?

I tried just writing the the function like

writeDate()

and putting it in script tags but those don't work.

Thanks

Allen in Dallas

++++++++++++++++++++beging code++++++++++++++++++++
<html>
<head>
<title>JS Date</title>
<style>
body
{
font-family:"Arial";
}
</style>
</head>
<body>
<h1>JS Date</h1>

<br />

<p>This script takes the JS Date object <br />
and parses it to write out the day and the date. <br />
It uses getElementByID and innerHTML to write.

<br />


<br /></p><br>
<h1>
<div style = "background-color: #004280; color: #FFFFFF; width: 100%; height: 50px; text-align: center;">
<script type="text/javascript">
function writeDate(){
//window.onload=function(){
// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()< 10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}

// Join it all together
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;
document.getElementById('cmsDateTime').innerHTML = today;
}

</script>

<div id="cmsDateTime" style = "background-color: #004280; color: #FFFFFF; width: 70%; text-align: center;"></div>

</div>
</h1>
<div>
<!-- The next lines display a randomly selected banner with every banner onLoad-->
<script type="text/javascript">
window.onload = function randImgCap()
{
var banner = new Array();
banner[0] ="blue.jpg"
banner[1] ="green.jpg"
banner[2] ="red.jpg"
banner[3] ="purple.jpg"
banner[4] ="yellow.jpg"

random = Math.floor(Math.random() * banner.length);
document.getElementById ('randomImage').src = banner[random];
}
</script>
<img src="" alt="Shared_banner" width="50" height="30" id="randomImage"/>

</div>


</body>
</html>


++++++++++++++++++++end code++++++++++++++++++++

Open in new window

blue.jpg
green.jpg
purple.jpg
red.jpg
yellow.jpg
Avatar of Gary
Gary
Flag of Ireland image

Confusing what you want to do from your code
If you want to fire two functions at page load then just do

window.onload = function() {
    function1();
    function2();
}

Open in new window

Or in your randImgCap call the other function
Avatar of Allen Pitts

ASKER

Hello Gary,

So I wrote out the first function writeDate() and then the second
function randImgCap().

Then I called them both with the window. onload
window.onload=function(){
function writeDate();
function randImgCap();
}

Open in new window

Now neither one of them work.

Code below

Thanks.

Allen


<html>
<head>
<title>JS Date</title>
<style>
body
{
font-family:"Arial";
}
</style>
</head>
<body>
<h1>JS Date</h1>

<br />

<p>This script takes the JS Date object <br />
and parses it to write out the day and the date. <br />
It uses getElementByID and innerHTML to write.

<br />


<br /></p><br>
<h1>

<script type="text/javascript">
function writeDate(){
// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()< 10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}

// Join it all together
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;
document.getElementById('cmsDateTime').innerHTML = today;
}

function randImgCap()
{
var banner = new Array();
banner[0] ="blue.jpg"
banner[1] ="red.jpg"
banner[2] ="purple.jpg"
banner[3] ="green.jpg"
banner[4] ="yellow.jpg"



random = Math.floor(Math.random() * banner.length);
document.getElementById ('randomImage').src = banner[random];
}


window.onload=function(){
function writeDate();
function randImgCap();
}

</script>

<div id="cmsDateTime" style = "background-color: #004280; color: #FFFFFF; width: 70%; text-align: center;"></div>
</div>
</h1>
<div>
<img src="" alt="Shared_banner" width="50" height="30" id="randomImage"/>

</div>


</body>
</html>

Open in new window

window.onload=function(){
 writeDate();
 randImgCap();
 }

Open in new window

When you use the function keyword, you're defining the function:

function thing() { ... }

When you want to run the function, you just use the function name:

thing();

If you want a good learning resource for JavaScript, try CodeAvengers.  If you want help debugging JavaScript, learn about Chrome Dev Tools.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial