document.onload Clarification

**magicyte** · 03-12-2011, 10:11 PM

Hey guys! I haven't been here for a while, and I haven't been coding for a while either. Recently, I've attempted a start back up and am having some trouble with document.onload. I revisited an old script of mine and tried to execute a document.onload function in the <script> tags. For some reason, it doesn't seem to work, and since it's been a year or so since I've dealt with this stuff, I can't seem to find the problem.

It was an old blog post for a somewhat average attempt at a JavaScript effect library (http://www.dynamicdrive.com/forums/blog.php?b=9). The jasoop.js is identical to what can be found in the blog post. Here is the code I'm experimenting with.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jasoop.js"></script>
<script type="text/javascript">
var myElement;

document.onload = function() {
	myElement = new Effect("slide");
}
</script>
<style type="text/css">
#slide {
	background: black;
	width: 480px;
	height: 360px;
}
</style>
</head>
<body>
<div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
</body>
</html>

I don't understand why this won't work. It's following what I instructed in the blog post, but when I click the <div> Firebug gives me a "myElement is undefined". I assure you there is nothing erroneous in jasoop.js because I can just put the onload="functionThatDefinesmyElementHere()" attribute in the <body> tag and it works. Please explain to me what is being done incorrectly. Thanks!

**jscheuer1** · 03-13-2011, 03:49 PM

The document.onload event doesn't exist in at least some browsers. Firefox is one of them. It should be window.onload, or if executed in the global scope, simply onload.

Ideally you should be using an add/attach event thing, or even a document ready event. The syntax for either of those is different than for onload.

That said, this works:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jasoop.js"></script>
<script type="text/javascript">
var myElement;

onload = function() {
	myElement = new Effect("slide");
}
</script>
<style type="text/css">
#slide {
	background: black;
	width: 480px;
	height: 360px;
}
</style>
</head>
<body>
<div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
</body>
</html>

A document ready version:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jasoop.js"></script>
<style type="text/css">
#slide {
	background: black;
	width: 480px;
	height: 360px;
}
</style>
</head>
<body>
<div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
<script type="text/javascript">
var myElement = new Effect("slide");
</script>
</body>
</html>

Using your own slightly cumbersome addEvent function:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jasoop.js"></script>
<script type="text/javascript">
(function(el){
	var myElement;
	var myClick = function(){
		myElement.fadeOut(2, 'normal');
	};
	var myOnload = function() {
		myElement = new Effect(el);
		myElement.addEvent('click', myClick);
	};
	Effect.prototype.addEvent.call({element: window}, 'load', myOnload);
})('slide');
</script>
<style type="text/css">
#slide {
	background: black;
	width: 480px;
	height: 360px;
}
</style>
</head>
<body>
<div id="slide"></div>
</body>
</html>

Note: All these work using the jasoop version in the blog entry.

**magicyte** · 03-14-2011, 12:35 AM

Originally Posted by jscheuer1

The document.onload event doesn't exist in at least some browsers. Firefox is one of them. It should be window.onload, or if executed in the global scope, simply onload.

That's funny! I was at one point contemplating if Firefox had dropped it since it wasn't working and it'd been, what, a year?...also in any other generic web browsers because I'd run a test to see if it was just a problem with Firefox.

I really appreciate your time and help along with the examples you provided!

**magicyte** · 07-09-2011, 02:15 AM

Hey! Back again. Could you please explain {element: window} used in call()? I understand that it references window to the this pointer, but I don't understand what the "element" part is. Thanks!

**jscheuer1** · 07-09-2011, 04:54 AM

Using call() makes the first argument passed be referenced as this in the function (holds true for any function, though not all functions use the keyword this, so for them it would be pointless to use call). The function in this case uses this:

Code:

        addEvent: function(ev, response) {
            if (this.element.addEventListener)
                this.element.addEventListener(ev, response, false);
            else if (this.element.attachEvent) {
                var res = function() {
                    response.apply(this.element);
                };
                this.element.attachEvent("on" + ev, res);
            } else
                this.element["on" + ev] = response;
        },

So if we go like:

Code:

Effect.prototype.addEvent.call({element: window}, 'load', myOnload);

Then the object {element: window} will be this in the function. The function references this.element, and lo and behold the value of element in the object we passed as this is window.

Perhaps this will help explain it:

Code:

var obj = {element: 'bob'};
function func(){
	alert(this.element);
}
func.call(obj);

**magicyte** · 07-09-2011, 09:29 PM

Ah, now that I look back at the code I see that "element" was a property of the object "this" pointed to.. Silly me!

Thanks for the clarification, John!

Thread: document.onload Clarification

Thread Tools

Search Thread

document.onload Clarification

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions