for(i=0; i < 9; i++)
document.getElementById("b"+i).innerHTML=" ";
} // setup
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 iswin(let)
{
if(let == 'X') t=1;
if(let == 'O') t=2;
if((board[0] == t) && (board[1] == t) && (board[2] == t)) return true;
if((board[3] == t) && (board[4] == t) && (board[5] == t)) return true;
if((board[6] == t) && (board[7] == t) && (board[8] == t)) return true;
if((board[0] == t) && (board[3] == t) && (board[6] == t)) return true;
if((board[1] == t) && (board[4] == t) && (board[7] == t)) return true;
if((board[2] == t) && (board[5] == t) && (board[8] == t)) return true;
if((board[0] == t) && (board[4] == t) && (board[8] == t)) return true;
if((board[2] == t) && (board[4] == t) && (board[6] == t)) return true;
return false;
} // iswin
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
if(iswin('X')) {
setresult("X Wins!");
return;
}
nextmove();
} // clicked
function nextmove()
{
for(i=0; i<9; i++) {
if(board[i] == 0) { // empty space
board[i] = 2; // make it O
setletter("b"+i,'O')
break; // all done
}
}
if(iswin('O')) {
setresult("O Wins!");
}
} // nextmove
</script>
</head>
<body onLoad="setup();">
<form name="controls" method="post" action="#">
<table>
<tr>
<td> <button type="button"
name="reset" onClick='setup();')>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>