getElementById doesn't work onload

Very simple code. Why won't this work?

<html>
<head>

<script type="text/javascript">
window.onload = document.getElementById("thisThing").style.backgro und =
"red";
</script>

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

<vadivasbro@hotmail.com> wrote in message
news:1106934160.347910.131730@z14g2000cwz.googlegr oups.com...[color=blue]
> Very simple code. Why won't this work?
>
>
> <html>
> <head>
>
> <script type="text/javascript">
> window.onload = document.getElementById("thisThing").style.backgro und =
> "red";
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:40px; 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.getElementById("thisThing").style.backgro und = "red";
</script>

vadivasbro@hotmail.com wrote:
[color=blue]
> Very simple code. Why won't this work?
>
>
> <html>
> <head>
>
> <script type="text/javascript">
> window.onload = document.getElementById("thisThing").style.backgro und =
> "red";[/color]

window.onload = function(){
document.getElementById("thisThing").style.backgro und ="red";
}
mick[color=blue]
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:40px; width:50px;
> background:blue">
> </div>
> </body>
> </html>
>[/color]

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

[snip]
[color=blue]
> window.onload = document.getElementById("thisThing"
> ).style.background = "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.background 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.

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.

vadivasbro@hotmail.com said:[color=blue]
>
>Very simple code. Why won't this work?[/color]
[color=blue]
>window.onload = document.getElementById("thisThing").style.backgro und =
>"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.getElementById("thisThing")
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.getElementById("thisThing).style.backgrou nd = "red";

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

Try:

window.onload = function() {
document.getElementById("thisThing").style.backgro und = "red";
};

I guess I could be wrong, but I thought that in Javascript, you access
the background-color style like this:
document.getElementById("thisThing").style.b*ackgr oundColor = 'red'

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

On 29 Jan 2005 07:16:31 -0800, colyn <colyn.brown@gmail.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.getElementById("thisThing").style.b*ackgr oundColor = '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.

(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.getElementById("thisThing").style.visibil ity = "hidden";
}

</script>

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

</body>
</html>

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.getElementById("thisThing").style.visibil ity = "hidden";
> }
>
> </script>
>
> </head>
> <body>
> <div id="thisThing" style="height:40px; 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;

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

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