getElementById doesn't work onload

**McKirahan** · Jul 23 '05, 04:52 PM

Re: getElementById doesn't work onload

<vadivasbro@hot mail.com> wrote in message
news:1106934160 .347910.131730@ z14g2000cwz.goo glegroups.com.. .[color=blue]
> Very simple code. Why won't this work?
>
>
> <html>
> <head>
>
> <script type="text/javascript">
> window.onload = document.getEle mentById("thisT hing").style.ba ckground =
> "red";
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:4 0px; width:50px;
> background:blue ">
> </div>
> </body>
> </html>
>[/color]

Apparently, the <div> isn't available before "onload" executes.

If you move (and change) it to the end it works:

<script type="text/javascript">
document.getEle mentById("thisT hing").style.ba ckground = "red";
</script>

**Mick White** · Jul 23 '05, 04:52 PM

Re: getElementById doesn't work onload

vadivasbro@hotm ail.com wrote:
[color=blue]
> Very simple code. Why won't this work?
>
>
> <html>
> <head>
>
> <script type="text/javascript">
> window.onload = document.getEle mentById("thisT hing").style.ba ckground =
> "red";[/color]

window.onload = function(){
document.getEle mentById("thisT hing").style.ba ckground ="red";
}
mick[color=blue]
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:4 0px; width:50px;
> background:blue ">
> </div>
> </body>
> </html>
>[/color]

**Michael Winter** · Jul 23 '05, 04:52 PM

Re: getElementById doesn't work onload

On 28 Jan 2005 09:42:40 -0800, <vadivasbro@hot mail.com> wrote:
[color=blue]
> Very simple code. Why won't this work?[/color]

[snip]
[color=blue]
> window.onload = document.getEle mentById("thisT hing"
> ).style.backgro und = "red";[/color]

When you assign a listener to an element via a script (rather than in
HTML), the listener expects a function reference. What you've done above
is attempt[1] to assign the string, 'red', to the window.onload and
style.backgroun d properties.

Although you can specify free-form code in HTML attributes, what the user
agent does is place that code in an anonymous function and assigns it to
the element. Therefore,

<body onload="/* ... */">

becomes

window.onload = function(event) {
/* ... */
};

except in IE (it doesn't pass an event argument - the event object is
global).

You have to perform this step yourself.

[snip]

Hope that helps,
Mike

[1] It is nothing more than an attempt as accessing the style property
will cause an error because as far as the user agent is concerned the
element, thisThing, doesn't exist yet. The user agent must at least
encounter and parse the element before that can change.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Michael Winter** · Jul 23 '05, 04:52 PM

Re: getElementById doesn't work onload

On Fri, 28 Jan 2005 12:13:18 -0600, McKirahan <News@McKirahan .com> wrote:

[snip]
[color=blue]
> Apparently, the <div> isn't available before "onload" executes.[/color]

HTML elements have to be parsed before they can be referenced in a script.
You should be able to write:

<div ... id="thisThing" >
<script type="text/javascript">
/* ... */
</script>

</div>

though in some circumstances (such as if you want to read the computed
styles of the element) it might be better to place the SCRIPT block after
the closing tag.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Lee** · Jul 23 '05, 04:52 PM

Re: getElementById doesn't work onload

vadivasbro@hotm ail.com said:[color=blue]
>
>Very simple code. Why won't this work?[/color]
[color=blue]
>window.onloa d = document.getEle mentById("thisT hing").style.ba ckground =
>"red";[/color]

The first step in executing that assignment statement is to
evaluate the expression on the right hand side of the = sign.
Javascript will immediately squawk because there are two = signs
in that statement.

If that didn't cause a failure, the next thing it would do would
be to invoke the method:
document.getEle mentById("thisT hing")
That's going to fail because the document hasn't been loaded yet
(we're still evaluating the value to be assigned to window.onload).

If that didn't fail, you still wouldn't really want to assign to
the window.onload attribute the value returned by the expression:

document.getEle mentById("thisT hing).style.bac kground = "red";

because that value is not a Function reference. The value of
that expression is actually the string "red".

Try:

window.onload = function() {
document.getEle mentById("thisT hing").style.ba ckground = "red";
};

**colyn** · Jul 23 '05, 04:53 PM

Re: getElementById doesn't work onload

I guess I could be wrong, but I thought that in Javascript, you access
the background-color style like this:
document.getEle mentById("thisT hing").style.b ackgroundColor = 'red'

and the div style would look like this:
style="height:4 0px; width:50px; background-color:blue"

**Michael Winter** · Jul 23 '05, 04:53 PM

Re: getElementById doesn't work onload

On 29 Jan 2005 07:16:31 -0800, colyn <colyn.brown@gm ail.com> wrote:
[color=blue]
> I guess I could be wrong, but I thought that in Javascript, you access
> the background-color style like this:
> document.getEle mentById("thisT hing").style.b ackgroundColor = 'red'[/color]

Assuming you remove the typo, yes, you can. However, there's nothing
intrinsically wrong with setting the colour using the shortcut property.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**2obvious** · Jul 23 '05, 05:30 PM

Re: getElementById doesn't work onload

(Doggonit. Hate it when I oversimplify a question.)

(Plus, the bad syntax didn't help, either.)

Let me reiterate: why won't /this/ work?

<html>
<head>

<script type="text/javascript">
window.onload = LoadFunctions() ;

function LoadFunctions()
{
document.getEle mentById("thisT hing").style.vi sibility = "hidden";
}

</script>

</head>
<body>
<div id="thisThing" style="height:4 0px; width:50px;
background:blue ">
</div>

</body>
</html>

**RobB** · Jul 23 '05, 05:30 PM

Re: getElementById doesn't work onload

2obvious wrote:[color=blue]
> (Doggonit. Hate it when I oversimplify a question.)
>
> (Plus, the bad syntax didn't help, either.)
>
> Let me reiterate: why won't /this/ work?
>
> <html>
> <head>
>
> <script type="text/javascript">
> window.onload = LoadFunctions() ;
>
> function LoadFunctions()
> {
> document.getEle mentById("thisT hing").style.vi sibility = "hidden";
> }
>
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:4 0px; width:50px;
> background:blue ">
> </div>
>
> </body>
> </html>[/color]

Those parentheses after the function's "name" - which is the name of a
variable where the (function) object is stored - aren't just for
storing arguments: they constitute an operator signifying a call of the
function. If you go

window.onload = LoadFunctions() ;

....then LoadFunctions will be called on the spot, and its return value,
if any, assigned as the handler. This is sometimes useful, but not when
unintended. Store a function pointer instead:
window.onload = LoadFunctions;

**Michael Winter** · Jul 23 '05, 05:30 PM

Re: getElementById doesn't work onload

2obvious wrote:[color=blue]
> (Doggonit. Hate it when I oversimplify a question.)[/color]

Yeah, it's generally not a good idea to do that. :)
[color=blue]
> Let me reiterate: why won't /this/ work?[/color]

[snip]
[color=blue]
> window.onload = LoadFunctions() ;[/color]

The function, LoadFunctions, will be called immediately. That's what
parentheses are for - function calls. The onload property is expecting
a function reference so in this case, only the function name should be
only the right-hand side of the statement:

window.onload = LoadFunctions;

or better yet:

window.onload = function() {
/* ... */
};

This avoids creating an identifier which you'll never actually need to
use.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Michael Winter** · Jul 23 '05, 05:30 PM

Re: getElementById doesn't work onload

Michael Winter wrote:

[snip]
[color=blue]
> That's what parentheses are for - function calls.[/color]

[snip]

That was rather careless. Of course, parentheses are also used to
force, or clarify, the order of evaluation in an expression.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**2obvious** · Jul 23 '05, 05:34 PM

Re: getElementById doesn't work onload

* smacks his head for not paying attention in class *

Yes...this all makes perfect sense out of behavior I thought to be
sporadic. Had I only known this a year ago...

Thank you muchly, RobB and Mike. This has been very illuminating. My
work is flying along now.

--E.

getElementById doesn't work onload

getElementById doesn't work onload

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment