grab cell (<TD>) bgcolor with onClick and put it in a input type text...

[A.S.]

Hi,

I have the following simple code:

<TABLE><TR>
<TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value =
this.bgcolor">hello</TD>
</TR></TABLE>

<FORM ACTION="hello.cgi" NAME="myform" ID="myform">
<INPUT TYPE="text" NAME="color" SIZE="10" MAXLENGTH="10">
</FORM>

When I click on the cell, the text input box shows 'undefined'. How
can I insert the cell's bgcolor hex code (#FFFFFF) into the form's
box.

Thanks,
A.S.

[Geoff Tucker]

"A.S." <an**@cyber-wizard.com> wrote in message

Hi,

I have the following simple code:

<TABLE><TR>
<TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value =
this.bgcolor">hello</TD>
</TR></TABLE>
<table><tr>
<td style="background-color:#ffffff"
onclick="document.myform.color.value =
this.style.backgroundColor">hello</td>
</tr></table>
<FORM ACTION="hello.cgi" NAME="myform" ID="myform">
<INPUT TYPE="text" NAME="color" SIZE="10" MAXLENGTH="10">
</FORM>

When I click on the cell, the text input box shows 'undefined'. How
can I insert the cell's bgcolor hex code (#FFFFFF) into the form's
box.

Thanks,
A.S.

Hope this helps

Geoff

[Richard Cornford]

"A.S." <an**@cyber-wizard.com> wrote in message
news:b1**************************@posting.google.c om...
<snip>

<TABLE><TR>
<TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value =
this.bgcolor">hello</TD>
</TR></TABLE>

<snip>

Whatever else you do and whatever your motivation for wanting to do
this, JavaScript is a case sensitive language and the correct name for
the property that you are reading is - bgColor - (upper case "C" at the
start of "Color").

However - myform.color.value - is an (almost) IE only property accessor
as named/IDed forms are not made available as properties of the global
object on many browsers including Mozilla, Netscape 6+ and all other
browsers in the Gecko-based family. It would be better to use global
form references that are relative to the document object and preferably
the W3C DOM Level 2 specified (and extremely back-compatible)
document.forms collection.

Richard.

[A.S.]

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message news:<bg*******************@news.demon.co.uk>...

"A.S." <an**@cyber-wizard.com> wrote in message
news:b1**************************@posting.google.c om...
<snip>

<TABLE><TR>
<TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value =
this.bgcolor">hello</TD>
</TR></TABLE>

<snip>

Whatever else you do and whatever your motivation for wanting to do
this, JavaScript is a case sensitive language and the correct name for
the property that you are reading is - bgColor - (upper case "C" at the
start of "Color").

However - myform.color.value - is an (almost) IE only property accessor
as named/IDed forms are not made available as properties of the global
object on many browsers including Mozilla, Netscape 6+ and all other
browsers in the Gecko-based family. It would be better to use global
form references that are relative to the document object and preferably
the W3C DOM Level 2 specified (and extremely back-compatible)
document.forms collection.

Richard.

Richard, I completely agree with you. I need the script to be
back-compatible as much as possible. What would you suggest I should
use in my javascript to accomplish this? The script suggested above
uses styles, which are very recent, too.

[Richard Cornford]

"A.S." <an**@cyber-wizard.com> wrote in message
news:b1**************************@posting.google.c om...
<snip>

<TABLE><TR>
<TD BGCOLOR="#FFFFFF"
ONCLICK="myform.color.value =this.bgcolor">hello</TD>
</TR></TABLE>

<snip>... . It would be better to use global
form references that are relative to the document object and
preferably the W3C DOM Level 2 specified (and extremely
back-compatible) document.forms collection.

Richard, I completely agree with you. I need the script to be
back-compatible as much as possible. What would you suggest
I should use in my javascript to accomplish this? The script
suggested above uses styles, which are very recent, too.

As I global reference to the form element's value I would always use:-

document.forms["myform"].elements["color"].value
- or -
document.forms.myform.elements.color.value

- as it will work in every JavaScript capable browser that I am aware of
including the oldest still in use.

As far as the style objects are concerned, they have been around since
IE 4 and I am not aware of a subsequent JavaScript capable browser that
does not implement them. The browser that would cause most trouble with
a script that attempted to use the style object of elements would be
Netscape 4, but Netscape 4 does not implement onclick events on TD
elements so your code will never be executed in that environment anyway.

On the other hand the bgcolor attribute has been deprecated on TD
elements (and others) so its use might have forward compatibility
problems (though the - bgColor - property is still present in the DOM
level 2 specification).

However, you have not said what it is that you are trying to do with
this script. There might be alternatives that would better achieve your
goal.

Richard.