getElementById doesn't work onload

vadivasbro

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>

Jul 23 '05 #1

Subscribe Post Reply

19718

McKirahan

<va********@hotmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...

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>

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>

Jul 23 '05 #2

Mick White

va********@hotmail.com wrote:

Very simple code. Why won't this work?
<html>
<head>

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

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

Jul 23 '05 #3

Michael Winter

On 28 Jan 2005 09:42:40 -0800, <va********@hotmail.com> wrote:

Very simple code. Why won't this work?
[snip]
window.onload = document.getElementById("thisThing"
).style.background = "red";

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.

Jul 23 '05 #4

Michael Winter

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

[snip]

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

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.

Jul 23 '05 #5

Lee

va********@hotmail.com said:

Very simple code. Why won't this work? window.onload = document.getElementById("thisThing").style.backgro und =
"red";

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";
};

Jul 23 '05 #6

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*ackgr oundColor = 'red'

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

Jul 23 '05 #7

Michael Winter

On 29 Jan 2005 07:16:31 -0800, colyn <co*********@gmail.com> wrote:

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'

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.

Jul 23 '05 #8

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.visibil ity = "hidden";
}

</script>

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

</body>
</html>

Jul 23 '05 #9

RobB

2obvious wrote:

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

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;

Jul 23 '05 #10

Michael Winter

2obvious wrote:

(Doggonit. Hate it when I oversimplify a question.)
Yeah, it's generally not a good idea to do that. :)
Let me reiterate: why won't /this/ work?
[snip]
window.onload = LoadFunctions();

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.

Jul 23 '05 #11

Michael Winter

Michael Winter wrote:

[snip]

That's what parentheses are for - function calls.

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

Jul 23 '05 #12

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.

Jul 23 '05 #13

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

Javascript

Simplest getElementById question ever.

by: Rich Hephner | last post by:

Why isn't this working? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;...

Javascript

document.getElementById( ....

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

Javascript

Odd -- document.getElementById doesn't seem to work in this context

by: weston | last post by:

Maybe I just need another pair of eyes or two, but it really seems as if document.getElementById is choking on me. This page: http://www.mortgageplans.com/mbc-network/enroll.html?EC=245 has an...

Javascript

Help! document.getElementById("folderMenu").cells has no properties when using FireFox

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

Javascript

document.onload and getElementById() don't cooperate

by: Erwin Moller | last post by:

Hi group, I stumbled on something strange. I simplified the problem to this: A straightforward page with some JS: <span id="testid"> Hi

Javascript

shortcut for document.getElementById and some error

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');...

Javascript

GetElementByID nog working for DIVs in Firefox?

by: Jan Doggen | last post by:

Hello, The following code displays the name for all three elements in IE, but fails for the1st and 3rd in Firefox. What could be going on? I tried SPAN instead of DIV doesn;t work either....

Javascript

Using getElementById to get img.src.value and applying to other stuff...

by: mhito | last post by:

hi guys, My first post yes. Thanks for all the nice posts and threads in this forum - great stuff. Now, here's my question: First off, the url : http://catfish.businesscatalyst.com/bcimg.htm...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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

Windows Server

Problem With Comparison Operator <=> in G++

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

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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

Online Marketing

getElementById doesn't work onload

Similar topics