Question

I am having a javascript problem. What I am trying to do is set the colour of every cell in a table to a chosen colour once a reset button has been clicked.

This is what I have so far:

function resetColour(objName)
{  
    var arr = new Array();
    arr = document.getElementsByName(objName);

    alert("total objects with name \"free\" = \n" + arr.length);

    for(var i = 0; i < arr.length; i++)
    {
        arr(i).style.backgroundColor = "#FAF4E3";
    }
}

The end of my html looks like this:

                <tr>
                    <td onclick="tdOnclick(this)"><center>17:00 - 18:00</center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="mon17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="tue17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="wed17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="thu17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="fri17"></center></td>
                </tr>
                <tbody>
            </table>
            <input type="reset" name="reset" value="Reset" onclick="resetColour('free')">
            <input type="submit" name="submit" value="Submit">

What am I doing wrong that is making this not work?

EDIT: This piece of javascrip might be messing things up for me. How can I edit this so that it will change the colour of the whole td?

function tdOnclick(td) {
    for(var i = 0; i < td.childNodes.length; i++) {
        if(td.childNodes[i].nodeType == 1) {
            if(td.childNodes[i].nodeName == "INPUT") {
                if(td.childNodes[i].checked) {
                    td.childNodes[i].checked = false;
                    td.style.backgroundColor = "#FAF4E3";
                } else {
                    td.childNodes[i].checked = true;
                    td.style.backgroundColor = "#E1E1E1";
                    input.style.backgroundColor = "#E1E1E1";
                }
            } else {
                tdOnclick(td.childNodes[i]);
            }
        }
    }
}

Answer 1

so you want the <td>‘s to change color based on the name you pass? (not the <input>, not the <center>)

function resetColour(objName){  

    //get element by name (as requested by post)
    var arr = document.getElementsByName(objName);

    //store length in variable
    //some say accessing .length in a loop condition adds overhead 
    var arrLen = arr.length;

    //loop through all found elements    
    for(var i = 0; i < arrLen; i++){

        //InputElement.CenterTag.TdElement.style.backgroundColor = foo
        arr[i].parentNode.parentNode.style.backgroundColor = "#F00";
    }
}

function tdOnclick(obj){
    obj.style.backgroundColor = "#F00";
}

you might wanna avoid using <center>, besides that it’s deprecated, it’s the cause of the additional .parentNode in the code (totally unnecessary). use CSS to center content instead.