document.onload and getElementById() don't cooperate

E

Erwin Moller

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
 
J

Jonas Raoni

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.
Click to expand...

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

Jonas Raoni

Jonas Raoni escreveu:
Erwin Moller escreveu:

"document.onload = alertID();" should be "document.onload = alertID;"
Click to expand...

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

Martin Honnen

Erwin said:
// call it after loading
document.onload = alertID();
Click to expand...

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.
 
L

Lee

Erwin Moller said:
// call it after loading
document.onload = alertID();
Click to expand...

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;
 
E

Erwin Moller

Jonas said:
Jonas Raoni escreveu:

Ah, change the "document" to "window" :b
Click to expand...

Hi,

Thanks for quick response.

window instead of document helped a lot. :p

Thanks!

Regards,
Erwin Moller
 
V

VK

Erwin said:
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>
Click to expand...

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>
 
E

Erwin Moller

VK said:
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>
Click to expand...


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
 
E

Erwin Moller

Erwin said:
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?
Click to expand...

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
 
E

Erwin Moller

Lee said:
Erwin Moller said:


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;
Click to expand...

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
 
M

Michael Winter

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

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

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
 
E

Erwin Moller

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

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

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.
Click to expand...


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
 
R

Randy Webb

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.
Click to expand...

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.
Click to expand...



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
Click to expand...

"gives a hint to the browser".......
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

value from getElementById() 1
DJForm Login Help! 1
getElementById returns null 6
Google sheets song request 3
IE shows false and Firefox shows true 3
getElementById and Firefox 4
Php modal form to email 1
Chatbox for website 1

Members online

Total: 78 (members: 3, guests: 75)
Robots: 167

Forum statistics

Threads
474,268
Messages
2,571,095
Members
48,773
Latest member
Kaybee

Latest Threads

Top