?
Solved

Javascript window onload

Posted on 2014-08-19
5
Medium Priority
?
379 Views
Last Modified: 2014-08-20
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
0
Comment
Question by:Allen Pitts
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40271263
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
0
 

Author Comment

by:Allen Pitts
ID: 40271312
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 40271321
window.onload=function(){
 writeDate();
 randImgCap();
 }

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40271373
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.
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40271488
You have errors in your javascript code: http://jsbin.com/kazik/1/edit?js and click on the errors at the bottom of the js panel.  You're missing semicolons and nested one of your functions, which makes it only accessible to the function it's nested in.  When calling functions you don't need to use the "function" keyword at the beginning.  As Ray has suggested, a bit of background reading will help.

Here is the cleaned up code:

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

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();

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

function randImgCap() {
	var banner = [];
	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(){
	writeDate();
	randImgCap();
};

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question