By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,558 Members | 1,607 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,558 IT Pros & Developers. It's quick & easy.

document.onload and getElementById() don't cooperate

P: n/a
Hi group,

I stumbled on something strange.

I simplified the problem to this:

A straightforward page with some JS:

<span id="testid">
Hi
</span>

<script type="text/javascript">
function alertID(){
var someID = document.getElementById("testid");
alert (someID);
}

// call it after loading
document.onload = alertID();
</script>

will produce an alert saying [object]
as expected.
But if I 'program' the function before the span, like this, it produces
null.

<script type="text/javascript">
function alertID(){
var someID = document.getElementById("testid");
alert (someID);
}
// call it after loading
document.onload = alertID();
</script>

<span id="testid">
Hi
</span>
That came as a surprise to me because I was thinking (and hoping) the
function would be evaluated AFTER the page loads.
It seems that JS is trying the function, then NOT finds the div (because it
is not on the page yet), and gives me null back, instead of evaluating the
function AFTER loading the page.

I have this behaviour on IE6 and Firefox.

Can anybody shed some light on this?

Regards,
Erwin Moller
Jan 5 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Erwin Moller escreveu:
That came as a surprise to me because I was thinking (and hoping) the
function would be evaluated AFTER the page loads.
It seems that JS is trying the function, then NOT finds the div (because it
is not on the page yet), and gives me null back, instead of evaluating the
function AFTER loading the page.


"document.onload = alertID();" should be "document.onload = alertID;"
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com

Jan 5 '06 #2

P: n/a
Jonas Raoni escreveu:
Erwin Moller escreveu:
That came as a surprise to me because I was thinking (and hoping) the
function would be evaluated AFTER the page loads.
It seems that JS is trying the function, then NOT finds the div (because it
is not on the page yet), and gives me null back, instead of evaluating the
function AFTER loading the page.


"document.onload = alertID();" should be "document.onload = alertID;"


Ah, change the "document" to "window" :b
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com

Jan 5 '06 #3

P: n/a

Erwin Moller wrote:
// call it after loading
document.onload = alertID();


You want
document.onload = alertID;
or better
window.onload = alertID;

Your assignment simply calls alertID (it has the call alertID()) and
then assigns the return value to the onload property of the document
object. What you need to do is set the onload property to the function
that you want to be called when the event is fired.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jan 5 '06 #4

P: n/a
Jonas Raoni wrote:
Jonas Raoni escreveu:
Erwin Moller escreveu:
> That came as a surprise to me because I was thinking (and hoping) the
> function would be evaluated AFTER the page loads.
> It seems that JS is trying the function, then NOT finds the div
> (because it is not on the page yet), and gives me null back, instead of
> evaluating the function AFTER loading the page.


"document.onload = alertID();" should be "document.onload = alertID;"


Ah, change the "document" to "window" :b


Hi,

Thanks for quick response.

window instead of document helped a lot. :P

Thanks!

Regards,
Erwin Moller
Jan 5 '06 #5

P: n/a
VK

Erwin Moller wrote:
Hi group,

I stumbled on something strange.

I simplified the problem to this:

A straightforward page with some JS:

<span id="testid">
Hi
</span>

<script type="text/javascript">
function alertID(){
var someID = document.getElementById("testid");
alert (someID);
}

// call it after loading
document.onload = alertID();
</script>


Document doesn't have onload handler - window does (so you just adding
new property to the document)
Your should assign a function reference, not function body.
Script which is not intended for immediate execution goes to the head
section.
Also in your case you may (but not obligated at all!) set the defer
flag.

Bringing everything into conventional form:

<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Test</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
</script>
</head>
<body onload="alertID()">
<p id="testid">Test</p>
</body>
</html>

Jan 5 '06 #6

P: n/a
VK wrote:

Erwin Moller wrote:
Hi group,

I stumbled on something strange.

I simplified the problem to this:

A straightforward page with some JS:

<span id="testid">
Hi
</span>

<script type="text/javascript">
function alertID(){
var someID = document.getElementById("testid");
alert (someID);
}

// call it after loading
document.onload = alertID();
</script>


Document doesn't have onload handler - window does (so you just adding
new property to the document)
Your should assign a function reference, not function body.
Script which is not intended for immediate execution goes to the head
section.
Also in your case you may (but not obligated at all!) set the defer
flag.

Bringing everything into conventional form:

<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Test</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
</script>
</head>
<body onload="alertID()">
<p id="testid">Test</p>
</body>
</html>

Thank you too for your quick response (and Martin).

My problem is (was) that I am not making straight javascript, but dynamical.
So I come across some situations where I have to make parts visible, that
respond to a selectbox. Some are standard visible, others not.
Of course the number of selectboxes and the parts that should be displayed
in response are dynamical/databasedriven too. (Why make things easy. :P)

That is why I ended up with declaring that stuff halfway my script, instead
of producing a human understandable order.

Anyway, I screwed up with the document.onload, which should have been
window.onload. (Beat myself with a large trout)

Changing that really helped. ;-)

But you wrote something about 'defer'. I never saw that goodie before.
What is it doing?

Thanks!

Regards,
Erwin Moller
Jan 5 '06 #7

P: n/a
Erwin Moller wrote:
VK wrote:

Erwin Moller wrote:
Hi group,

I stumbled on something strange.

I simplified the problem to this:

A straightforward page with some JS:

<span id="testid">
Hi
</span>

<script type="text/javascript">
function alertID(){
var someID = document.getElementById("testid");
alert (someID);
}

// call it after loading
document.onload = alertID();
</script>
Document doesn't have onload handler - window does (so you just adding
new property to the document)
Your should assign a function reference, not function body.
Script which is not intended for immediate execution goes to the head
section.
Also in your case you may (but not obligated at all!) set the defer
flag.

Bringing everything into conventional form:

<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Test</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getElementById("testid");
alert (someID.innerHTML);
}
</script>
</head>
<body onload="alertID()">
<p id="testid">Test</p>
</body>
</html>

Thank you too for your quick response (and Martin).

My problem is (was) that I am not making straight javascript, but
dynamical. So I come across some situations where I have to make parts
visible, that respond to a selectbox. Some are standard visible, others
not. Of course the number of selectboxes and the parts that should be
displayed in response are dynamical/databasedriven too. (Why make things
easy. :P)

That is why I ended up with declaring that stuff halfway my script,
instead of producing a human understandable order.

Anyway, I screwed up with the document.onload, which should have been
window.onload. (Beat myself with a large trout)

Changing that really helped. ;-)

But you wrote something about 'defer'. I never saw that goodie before.
What is it doing?


Looked it up myself.
Why be lazy?

defer delays execution of the script untill body content is parsed and
rendered.
I see why you suggested that now.
The div I thought I was missing would be there with defer.
:-)
Very handy feature. :-)
I can see the use of that.
Regards,
Erwin Moller


Thanks!

Regards,
Erwin Moller


Jan 5 '06 #8

P: n/a
Lee wrote:
Erwin Moller said:
// call it after loading
document.onload = alertID();


That doesn't call the function after loading.
It calls the function immediately, and assigns the returned value to
document.onload.

You want:
document.onload = alertID;


Hi, Thanks

according to others I want:
window.onload = <functionname without ()>;

So I made a double mistake in that line.
(Where is the beer?)

Thanks and Regards,
Erwin Moller
Jan 5 '06 #9

P: n/a
On 05/01/2006 16:15, Erwin Moller wrote:

[snip]
defer delays execution of the script untill body content is parsed and
rendered.


No, it doesn't. The defer attribute /hints/ that execution can be
delayed. It makes no promises about when, or even that a delay will occur.

Though waiting until the markup had been parsed would be sensible,
waiting until rendering has been performed is probably not.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jan 5 '06 #10

P: n/a
Michael Winter wrote:
On 05/01/2006 16:15, Erwin Moller wrote:

[snip]
defer delays execution of the script untill body content is parsed and
rendered.
No, it doesn't. The defer attribute /hints/ that execution can be
delayed. It makes no promises about when, or even that a delay will occur.

Though waiting until the markup had been parsed would be sensible,
waiting until rendering has been performed is probably not.

Ok, don't blame me, I was just repeating what I read here:
http://www.websiteoptimization.com/speed/tweak/defer/

<quote>
First introduced by Internet Explorer 4, the defer attribute of the script
element is now part of the HTML 4 and XHTML specifications. The defer
attribute gives a hint to the browser that the script does not create any
content so the browser can optionally defer interpreting the script. This
can improve performance by delaying execution of scripts until after the
body content is parsed and rendered. Here's the brief paragraph describing
the defer attribute from the HTML 4.01 specification:

When set, this boolean attribute provides a hint to the user agent that
the script is not going to generate any document content (e.g., no
"document.write" in javascript) and thus, the user agent can continue
parsing and rendering.
</quote>

You are probably both right: they use the word 'may' instead of 'will',
making it all sound a lot less reliable.

Anyway, thanks for the warning.

Regards,
Erwin Moller

Mike


Jan 5 '06 #11

P: n/a
Erwin Moller said the following on 1/5/2006 11:32 AM:
Michael Winter wrote:

On 05/01/2006 16:15, Erwin Moller wrote:

[snip]

defer delays execution of the script untill body content is parsed and
rendered.


No, it doesn't. The defer attribute /hints/ that execution can be
delayed. It makes no promises about when, or even that a delay will occur.

Though waiting until the markup had been parsed would be sensible,
waiting until rendering has been performed is probably not.


Ok, don't blame me, I was just repeating what I read here:
http://www.websiteoptimization.com/speed/tweak/defer/

<quote>
First introduced by Internet Explorer 4, the defer attribute of the script
element is now part of the HTML 4 and XHTML specifications. The defer
attribute gives a hint to the browser


"gives a hint to the browser".......
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 5 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.