473,778 Members | 1,901 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

getElementById doesn't work onload

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>

Jul 23 '05 #1
12 19764
<va********@hot mail.com> wrote in message
news:11******** **************@ z14g2000cwz.goo glegroups.com.. .
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>


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>
Jul 23 '05 #2
va********@hotm ail.com wrote:
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";
window.onload = function(){
document.getEle mentById("thisT hing").style.ba ckground ="red";
}
mick </script>

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

Jul 23 '05 #3
On 28 Jan 2005 09:42:40 -0800, <va********@hot mail.com> wrote:
Very simple code. Why won't this work?
[snip]
window.onload = document.getEle mentById("thisT hing"
).style.backgro und = "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.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.
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********@hotm ail.com said:

Very simple code. Why won't this work? window.onloa d = document.getEle mentById("thisT hing").style.ba ckground =
"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.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";
};

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

Jul 23 '05 #7
On 29 Jan 2005 07:16:31 -0800, colyn <co*********@gm ail.com> wrote:
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'


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

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


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

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

Similar topics

4
5484
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) { document.getElementById(nameOfDiv).style.visibility='visible'; document.getElementById(nameOfDiv).style.height='auto'; if (nameOfDiv != 'weblogs')
10
1423
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; charset=iso-8859-1"> <script language="javascript"> alert(document.getElementById('pst'));
7
5995
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 contraction follows at the bottom of my message here. This following line is a big part of my hang-up: document.getElementById('m1').style.display='none';
3
1964
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 input form field coded like so: <input id="enrollCodeField" type="text" name="Code" value="" size="9"/> And I've got the following javascript, which tries to get a reference
3
9275
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 work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
11
42827
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
4439
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'); //works EBI3('myText'); //unexpected error
2
1643
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. (What I finally want is to set style.invisibility for the text in that DIV) TIA Jan
1
38724
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 When you get there an alert of the div/img name in question appears. It splits and grabs the 'name' from images/name.jpg.
0
9629
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9470
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10069
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9923
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8957
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7475
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6723
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4033
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3627
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.