By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,617 Members | 1,896 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,617 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a

"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
Jul 20 '05 #2

P: n/a
"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.
Jul 20 '05 #3

P: n/a
"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.
Jul 20 '05 #4

P: n/a
"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.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.