I'm having trouble with getElementById()

abacus

02-20-2006, 08:40 PM

Hi all,

I'm having trouble with getElementById()

Upon Load, I want to change the background color of a table cell if the length of the data in the cell is greater than 1.

I can change the color of the cell INDIRECTLY by doing a MouseOver() on a dynamically created box that recognizes my cell as testCell03.

But when my page loads, I get the error, "document.getElementById("testCell03") has no properties"

Not so much that I need know why it doesn't work, but what do I have to do to get it to work?

Here's the code:
<html>
<head>
<title>Background Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#box1{position: absolute;
top: 100px;
left: 200px;
width: 300px;
border: solid #ff0000 3px;
background-color: #ffff00;
color: #000000;
padding: 5px;
}

</style>

<script language = Javascript>

var testStr = "abcdefghi";

if (testStr.length > 1)
{
document.getElementById("testCell03").style.backgroundColor = "#ffff66";
}

function change()
{
document.getElementById("box1").style.backgroundColor = "#33ffff";
document.getElementById("testCell03").style.backgroundColor = "#33ffff";
}

function change_back()
{
document.getElementById("box1").style.backgroundColor = "#ffff66";
document.getElementById("testCell03").style.backgroundColor = "#ffff66";
}

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="box1" onMouseOver="change()" onMouseOut="change_back()">
<h4>This is a dynamically styled box.<br /><br /> Hover over this box and watch it<br /> & Test Cell 03 change. </h4>
</div>

<table border=1 cellpadding="2" cellspacing="2" width="80%">
<tr>
<td width="25%">Test Cell 01</td>
<td width="25%">Test Cell 02</td>
<td id="testCell03" name="testCell03" width="25%">Test Cell 03</td>
<td id="testCell04" width="25%">Test Cell 04</td>
</tr>
</table>

</body>
</html>

Kor

02-21-2006, 08:55 AM

Not so much that I need know why it doesn't work, but what do I have to do to get it to work?

Ntz ntz... You should be first intersted why it dosen't work, 'cose if you have found out why, the answer whould have came instantly...:rolleyes:

The answer is simple. You refere an element which is not yet loaded (the loading process is a sequential one, from the the top of the page to the bottom). The easiest way to make it work is to run that statement after the whole page was loaded. The event which help you to do that is onload

...
onload = function(){
if (testStr.length > 1)
{
document.getElementById("testCell03").style.backgroundColor = "#ffff66";
}
}
...

abacus

02-21-2006, 02:38 PM

Ntz ntz... You should be first intersted why it dosen't work, 'cose if you have found out why, the answer whould have came instantly...:rolleyes:
...

Of course I should understand why it doesn't work... but I made my statement in utter frustration.

You're a sweetheart!

Thank you so much for your quick & accurate reply.

BTW, I Do support Romania being a member of the EU!

Kor

02-21-2006, 04:58 PM

BTW, I Do support Romania being a member of the EU!

I do apprecite it. Tx. As an USA subject I guess you can not do much about it. Well, I guess either that no one here can do much on. It's just I feel I have to do something for my people somehow, whenever I can... :)