Javascript Select OnChange没有'不要第二次工作

Javascript Select OnChange doesn't work second time

本文关键字：第二次 工作 Select OnChange 没有 Javascript      更新时间：2023-09-26

我想创建一个带有一些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>

我建议切换类名。它将使它变得非常简单和灵活——例如，它不仅可以轻松地更改背景颜色，还可以轻松地改变任何其他样式，甚至不需要触摸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>

相关文章：