473,789 Members | 2,683 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

document.onload and getElementById( ) don't cooperate

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.getEle mentById("testi d");
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.getEle mentById("testi d");
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
11 42827
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.onloa d = alertID();" should be "document.onloa d = alertID;"
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com

Jan 5 '06 #2
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.onloa d = alertID();" should be "document.onloa d = alertID;"


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

Jan 5 '06 #3

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
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.onloa d = alertID();" should be "document.onloa d = 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
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.getEle mentById("testi d");
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>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Tes t</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
</script>
</head>
<body onload="alertID ()">
<p id="testid">Tes t</p>
</body>
</html>

Jan 5 '06 #6
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.getEle mentById("testi d");
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>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Tes t</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
</script>
</head>
<body onload="alertID ()">
<p id="testid">Tes t</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
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.getEle mentById("testi d");
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>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
window.onload = alertID;
</script>
</head>
<body>
<p id="testid">Tes t</p>
</body>
</html>

***************
or (equivalent)
***************
<html>
<head>
<title>JavaScri pt</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript" defer>
function alertID(){
var someID = document.getEle mentById("testi d");
alert (someID.innerHT ML);
}
</script>
</head>
<body onload="alertID ()">
<p id="testid">Tes t</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
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
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1947
by: DJ WIce | last post by:
Hi, I want to resize an IFRAME. It works nicely when I try to resize the frame with a commant loaded via onfocus="if (parseInt(document.body.scrollHeight)< parseInt(document.body.offsetHeight)) parent.document.getElementById('iframeID').style.height=parseInt(this.docume nt.body.scrollHeight)+2+'px';
4
5485
by: lawrence | last post by:
Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) { document.getElementById(nameOfDiv).style.visibility='visible'; document.getElementById(nameOfDiv).style.height='auto'; if (nameOfDiv != 'weblogs')
7
5997
by: PaulB | last post by:
Good Morning everybody, I'm trying to adapt a tutorial script that will handle the behaviour of an "Expanding/Contracting" site-navigation menu. The code that seems to handle the expansion and contraction follows at the bottom of my message here. This following line is a big part of my hang-up: document.getElementById('m1').style.display='none';
3
9276
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
136
9460
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their code was littered with document.all and eval, for example, and I wanted to create a practical list of best practices that they could easily put to use. The above URL is version 1.0 (draft) that resulted. IMO, it is not a replacement for the FAQ,...
2
4441
by: Earl Teigrob | last post by:
I am trying to build a custom control to wrap my smart navigation implimention (not microsofts 'cause it has problems) The follow code works fine when the onclick and onload events are defined in the Body tag. However, when I try to set them in Javascript code, I get errors. What am I doing wrong??? **********THIS WORKS ************ <html>
5
4439
by: HopfZ | last post by:
I made two shortcut functions for document.getElementById as: function EBI2(id){return document.getElementById(id)}; var EBI3 = document.getElementById; But EBI3 don't work. EBI2('myText'); //works EBI3('myText'); //unexpected error
6
4622
by: linuxnooby | last post by:
Hi I want a form field to be selected when the page loads. But I get the error message Error: document.getElementById("ff") has no properties any ideas what I am doing wrong? code below
4
2645
by: dr1ft3r | last post by:
Hey guys, I'm building a site for a landscaping business down the street and can't seem to get part of the code functioning correctly. The code fails on line 68 where I make a reference to an iframe's src property. Being that IE does not follow standard and considers an id, name, etc as a qualifying identifier for the document.getElementById object, I double checked to make sure that there's only one instance of id = "servif" and I never use...
0
9511
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10408
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10199
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10139
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9983
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7529
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6769
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
2
3700
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2909
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.