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

Discussion in 'Javascript' started by A.S., Jul 28, 2003.

  1. A.S.

    A.S. Guest

    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.
     
    A.S., Jul 28, 2003
    #1
    1. Advertisements

  2. A.S.

    Geoff Tucker Guest

    <table><tr>
    <td style="background-color:#ffffff"
    onclick="document.myform.color.value =
    this.style.backgroundColor">hello</td>
    Hope this helps

    Geoff
     
    Geoff Tucker, Jul 28, 2003
    #2
    1. Advertisements

  3. <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 Cornford, Jul 28, 2003
    #3
  4. A.S.

    A.S. Guest

    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.
     
    A.S., Jul 28, 2003
    #4
  5. 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.
     
    Richard Cornford, Jul 28, 2003
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.