getElementById doesn't work onload

V

vadivasbro

Very simple code. Why won't this work?


<html>
<head>

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

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

McKirahan

Very simple code. Why won't this work?


<html>
<head>

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

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

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.background = "red";
</script>
 
L

Lee

(e-mail address removed) said:
Very simple code. Why won't this work?
Click to expand...
window.onload = document.getElementById("thisThing").style.background =
"red";
Click to expand...

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.background = "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.background = "red";
};
 
M

Mick White

Very simple code. Why won't this work?


<html>
<head>

<script type="text/javascript">
window.onload = document.getElementById("thisThing").style.background =
"red";
Click to expand...

window.onload = function(){
document.getElementById("thisThing").style.background ="red";
}
mick
 
M

Michael Winter

Very simple code. Why won't this work?
[snip]

window.onload = document.getElementById("thisThing"
).style.background = "red";
Click to expand...

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

Michael Winter

[snip]
Apparently, the <div> isn't available before "onload" executes.
Click to expand...

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>
<!-- Other mark-up -->
</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
 
C

colyn

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­ackgroundColor = 'red'

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

Michael Winter

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­ackgroundColor = 'red'
Click to expand...

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

Mike
 
2

2obvious

(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.visibility = "hidden";
}

</script>

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

</body>
</html>
 
R

RobB

2obvious said:
(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.visibility = "hidden";
}

</script>

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

</body>
</html>
Click to expand...

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

Michael Winter

2obvious said:
(Doggonit. Hate it when I oversimplify a question.)
Click to expand...

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

window.onload = LoadFunctions();
Click to expand...

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
 
M

Michael Winter

Michael Winter wrote:

[snip]
That's what parentheses are for - function calls.
Click to expand...

[snip]

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

Mike
 
2

2obvious

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

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

object not found onload 3
Align img inside nav tabs section 5
Help with my responsive home page 2
Please Help? 0
Closing an overlay outside the overlay as well 1
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
An unknown bug doesn't allow the quotes app to work. What's the issue? 3
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 453

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top