Question

having another problem with my javascript for my table. Basically, if you look at the link I post, I have three cells with checkmarks and coloured red. When I click on the cell, the checkmark is removed and the cell changes colour. I want to make my reset button return the table to its initial state. However, this takes two clicks. You can test this out on the link here: http://cs1.ucc.ie/~od1/project_css/

Viewing the source there would be best but here is my javascript code that won’t allow it to work:

        function resetColour(objName){
            var arr = document.getElementsByName(objName);
            var arrLen = arr.length;

            for(var i = 0; i < arrLen; i++){
                if(arr[i].checked){
                    arr[i].parentNode.style.backgroundColor = "#F26C4F";
                }
                else{
                    arr[i].parentNode.style.backgroundColor = "#FAF4E3";
                }
            } 
        }

Is there any way I can make the form both reset and change colour with ONE click?

Answer 1

It is because it calls the function before the actual reset happen. The simplest (but the worst) way you can do is to wait for a few milliseconds to call your function.

<input type="reset" name="reset" value="Reset" onclick="setTimeout('resetColour(\'free\')',200)" class="button">

Edit
Better option is to use normal button instead of reset button and call the function first and then the form.reset

<input type="button" value="Reset Form" onClick="resetColour('free')';this.form.reset()" />