Changing bgColor of a <TD> with onFocus in Netscape

[TomDenver]

I'm having trouble getting this effect to work in Netscape, it works perfectly in IE. I have a table inside a form. Each <input> element has an onFocus and onBlur effect to change the bgColor of the table row that the <input> is in. It highlights the row green onFocus, and returns it to original color onBlur.

You can view this form here: http://www.churchpartner.com/furn/freight.htm

In Netscape it does nothing. Here's a snippet of the code:

<TR bgcolor="ddddff">
<TD colspan=2 id=input>
Organization:<INPUT type="text" name="Organization" size=36
onFocus="document.all.input[0].bgColor='#DFFFDF'"
onBlur="document.all.input[0].bgColor='#ddddff'">
Contact Name:<INPUT type="text" size=28 name="ContactName"
onFocus="document.all.input[0].bgColor='#DFFFDF'"
onBlur="document.all.input[0].bgColor='#ddddff'">
</TD>
</TR>

There's several more table rows in it obviously, but they just repeat this pattern. Each <TD> has the ID attribute set to "input" and I call on each one in JavaScript using document.all.input[0], document.all.input[1] and so on.

Is there any way to make this work in Netscape?

[pyro]

document.all is IE only, try the DOM compatable document.getElementById (after giving the elements ID's, of course) or, assuming it is inside a <form> tag, as it should be, try document.forms[0] or document.formname

[TomDenver]

Thanks Pyro.

I got it to work using getElementById. Here is the code now:


<TR class=alt>
<TD colspan=2 id=input1>
<FONT color=red>*
</FONT>Organization:<INPUT type="text" name="Organization" size=36
onFocus=document.getElementById("input1").style.backgroundColor='#DFFFDF'
onBlur=document.getElementById("input1").style.backgroundColor='#DDDDFF'>
<FONT color=red>* </FONT>Contact Name:<INPUT type="text" size=28 name="ContactName"
onFocus=document.getElementById("input1").style.backgroundColor='#DFFFDF'
onBlur=document.getElementById("input1").style.backgroundColor='#DDDDFF'>
</TD>
</TR>


Now I have a follow up question. Can I make this a function and pass the ID name to that function so I don't have to have all this ugly code on every <INPUT> field?

I tried doing it like this:

function highLight(jsID)
{
document.getElementById(' +jsID+ ').style.backgroundColor='#DFFFDF'
}


And calling this function like this:

onFocus="highLight('input1');"


But this doesn't work. It says object required when I try that, as if it's not seeing the ID.

[pyro]

Try doing it like this:

function highLight(jsID) {
document.getElementById(jsID).style.backgroundColor='#DFFFDF';
}

[TomDenver]

Thanks again Pyro, that worked perfectly.

[pyro]

You are welcome... :)