Javascript Select OnChange第二次无效

Question

I would like to create an html table with some td cells that could change background color,from red to green ("C" to "A") and from green to red ("A" to "C"), using "select onchange". It works the first time, but not the second.

Here is the JS

<script type="text/javascript">
function change(id){
var x=document.getElementById(id);
x.style.backgroundColor="#e50017";//red
}
function exchange (id){
var x=document.getElementById(id);
x.style.backgroundColor="#009900";//green
}
</script>

Here is the HTML

<form id="menuForm" name="menuForm" >
<table summary="layout table">
<tbody>
<tr>
           <td rowspan="1" colspan="1" id="prova" width="35px" align="center" bgcolor="#e50017">
            M
            <br>
            <select onchange="exchange('prova')" name="select1">
            <option value="0" selected="selected">C</option>
            <option value="1">A</option>
            </select>
            </td>
            <td rowspan="1" colspan="1" id="prova1" width="35px" align="center" bgcolor="#009900">
            M
            <br>
            <select onchange="change('prova1')" name="select2">
            <option value="1" selected="selected">A</option>
            <option value="0">C</option>
            </select>
            </td>
        </tr>
      </tbody>
    </table>     
</form>

Answer 1

I would recommend to toggle class names instead. It will make it much simple and flexible - for example it's easy to change not only background color but any other styles without even touching javascript function:

 function change(id) { var x = document.getElementById(id); x.className = x.className === 'red' ? 'green' : 'red'; } 

 .red { background: #e50017; } .green { background: #009900; } 

 <form id="menuForm" name="menuForm"> <table summary="layout table"> <tbody> <tr> <td rowspan="1" colspan="1" id="prova" width="35px" class="red" align="center">M <br> <select onchange="change('prova')" name="select1"> <option value="0" selected="selected">C</option> <option value="1">A</option> </select> </td> <td rowspan="1" colspan="1" id="prova1" width="35px" class="green" align="center">M <br> <select onchange="change('prova1')" name="select2"> <option value="1" selected="selected">A</option> <option value="0">C</option> </select> </td> </tr> </tbody> </table> </form>