I am trying to implement an HTML table with td cells that can change background color from red to green ("C" to "A") and from green to red ("A" to "C") using the "select onchange" event. The issue I am facing is that it works the first time but not the second time.
Below is the JavaScript code:
<script type="text/javascript">
function changeColor(id){
var cell=document.getElementById(id);
cell.style.backgroundColor="#e50017";//red
}
function exchangeColor(id){
var cell=document.getElementById(id);
cell.style.backgroundColor="#009900";//green
}
</script>
And here is the HTML structure:
<form id="menuForm" name="menuForm" >
<table summary="layout table">
<tbody></br>
<tr>
<td rowspan="1" colspan="1" id="prova" width="35px" align="center" bgcolor="#e50017">
M
<br>
<select onchange="exchangeColor('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="changeColor('prova1')" name="select2">
<option value="1" selected="selected">A</option>
<option value="0">C</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>