adding event, other problems...maybe

Discussion in 'JavaScript' started by brianazlo, Sep 23, 2007.

  1. #1
    I'm trying to create a script that gets the background color of multiple "td" elements, capitalizes their first letter, and assigns an onclick event to each that puts that capitalized background name into another form field. I'm getting errors that indicate I've done something stupid (missing ; ). Here's the JS, then the HTML.

    <code>
    window.onload=colorSwatch(){
    var colortable=document.getElementById('colortable');
    var blocks=colortable.rows[0].cells;
    for(i=0;i<blocks.length;i++) {
    colorgetter=blocks.getAttribute('bgcolor');
    var newval='';
    x=colorgetter.split('');
    for(var c=0; c < x.length; c++) {
    if (x[c]==x[0]) {
    newval += x[c].toUpperCase();
    else
    newval += x[c];
    }
    }
    blocks.onclick=getColor(newval){
    document.forms[0].picked.value=newval;
    }
    }
    }
    </code>

    HTML

    <code>
    <table id="colortable" border="0" cellspacing="1" cellpadding="2" bgcolor ="#000000">
    <tr>
    <td bgcolor ="black"></td>
    <td bgcolor ="brown"></td>
    <td bgcolor ="gray"></td>
    <td bgcolor ="white"></td>
    <td bgcolor ="red"></td>
    <td bgcolor ="pink"></td>
    <td bgcolor ="orange"></td>
    <td bgcolor ="yellow"></td>
    <td bgcolor ="blue"></td>
    <td bgcolor ="green"></td>
    <td bgcolor ="purple"></td>
    </tr>
    <tr>
    <td bgcolor ="#E0EEE0" id="Metallic" onclick="getColor(this.id)"></td>
    <td bgcolor ="#7171C6" id="Blue-Violet" onclick="getColor(this.id)"></td>
    <td bgcolor ="#D02090" id="Red-Violet" onclick="getColor(this.id)"></td>
    <td bgcolor ="#FF4500" id="Red-Orange" onclick="getColor(this.id)"></td>
    <td bgcolor ="#008080" id="Blue-Green" onclick="getColor(this.id)"></td>
    <td bgcolor ="#C0FF3E" id="Yellow-Green" onclick="getColor(this.id)"></td>
    <td bgcolor ="#EEB422" id="Yellow-Orange" onclick="getColor(this.id)"></td>
    <td bgcolor ="white" id="Any Color" onclick="getColor(this.id)"></td>
    <td bgcolor ="white" id="Whatever Color" onclick="getColor(this.id)"></td>
    <td bgcolor ="white" id="Et Cetera" onclick="getColor(this.id)"></td>
    <td bgcolor ="white" id="And So On..." onclick="getColor(this.id)"></td>
    </tr>
    </table>
    <fieldset>

    <label for="picked">Primary Color:</label><input type="text" readonly="readonly" id="picked" value="Any Color"/><br/>

    </fieldset>
    </code>
     
    brianazlo, Sep 23, 2007 IP
  2. Mike Bell

    Mike Bell Active Member

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    71
    #2
    Not sure... but you might try replacing:
    window.onload=colorSwatch(){
    with
    window.onload=function(){

    and:
    blocks.onclick=getColor(newval){
    with:
    blocks.onclick=function(newval){
     
    Mike Bell, Sep 26, 2007 IP