I want to change the color and text of a table cell when the cell is clicked.
Full code is below.
Problem is that text changes but the color does not.
When I run the code through Firefax Venkman debugger I see that the class is
changed but why is not the class color changing to what the class has set?
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color:
#000000;}
td.onetype {
background-color: #F1F1F1;
border: 1px #000000 solid;
}
td.another {
background-color: #F100F1;
border: 1px #000000 solid;
}
-->
</style>
<script>
function zub()
{
document.getElementById("one").parentNode.classNam e = "onetype";
document.getElementById("one").innerHTML="Works?";
}
</script>
</head>
<body><table border="1" cellspacing="2" cellpadding="4" width="200">
<tr>
<td class="another" id="one" onclick="zub()" width="20%">
Testing</td>
</tr></table></body>
</html>