473,372 Members | 1,000 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

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>

Jul 23 '05 #1
12 19716
<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
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
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
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>
<!-- 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

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

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

Similar topics

4
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) {...
10
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;...
7
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...
3
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...
3
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...
11
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
5
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');...
2
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....
1
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...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
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...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
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...

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.