Javascript Select OnChange第二次无效

Question

我想创建一个带有一些td单元格的html表，该单元格可以使用“ select onchange”将背景颜色从红色更改为绿色（“ C”更改为“ A”），从绿色更改为红色（“ A”更改为“ C”） ”。 它是第一次工作，但是第二次却没有。

这是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>

这是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

我建议改为切换类名。 这将使它变得更加简单和灵活-例如，即使不更改javascript函数，也可以轻松更改背景颜色和其他任何样式：

 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>