function setletter(loc,let)
{
var pos=document.getElementById(loc);
// first put the letter in the cell
pos.innerHTML=let;
// then change the CSS properties
pos.style.textAlign="center";
pos.style.fontSize="80px";
pos.style.color="red";
} // setletter
function clicked(loc)
{
// get the second character, the number
var cell = loc.charAt(1);
if(board[cell] != 0) {
setmesg("Cell is occupied");
return;
}
setletter(loc,'X')
board[cell] = 1; // mark it as a X space
setmesg(""); // remove any previous messages
} // clicked
</script>
</head>
<body onLoad="setup();">
<form name="controls" method="post" action="#">
<table>
<tr>
<td> <button type="button"
name="reset")>Reset</button> </td>
<td> <span id="mesg"></span> </td>
<td> <span id="result"></span> </td>
</tr>
</table>
</form>
<table id="board" border align="center">
<tr>
<td class="bcell" id="b0" onClick="clicked('b0');"> </td>
<td class="bcell" id="b1" onClick="clicked('b1');"> </td>
<td class="bcell" id="b2 onClick="clicked('b2');""> </td>
</tr>
<tr>
<td class="bcell" id="b3" onClick="clicked('b3');"> </td>
<td class="bcell" id="b4" onClick="clicked('b4');"> </td>
<td class="bcell" id="b5" onClick="clicked('b5');"> </td>
</tr>
<tr>
<td class="bcell" id="b6" onClick="clicked('b6');"> </td>
<td class="bcell" id="b7" onClick="clicked('b7');"> </td>
<td class="bcell" id="b8" onClick="clicked('b8');"> </td>
</tr>
</table>
</body>
</html>