<html>
<head>
  <title>JavaScript Example: TicTacToe</title>
  <style>
     .bcell { width: 100px; height: 100px;}
  </style>
<script language="Javascript" type="text/javascript">
  var board = Array(9);
  function setmesg(str)
  {
    // find the mesg object in the page
    var loc = document.getElementById('mesg')
    loc.innerHTML=str; // change innerHTML property to str
  } // setmesg

  function setresult(str)
  {
    // find the result object in the page
    var loc = document.getElementById('result')
    loc.innerHTML=str; // change innerHTML property to str
  } // setresult

  function setup()
  {
     setmesg("");  setresult("");
     for(i=0; i < 9; i++) board[i] = 0;
  } // 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 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');">&nbsp;</td> <td class="bcell" id="b1" onClick="clicked('b1');">&nbsp;</td> <td class="bcell" id="b2 onClick="clicked('b2');"">&nbsp;</td> </tr> <tr> <td class="bcell" id="b3" onClick="clicked('b3');">&nbsp;</td> <td class="bcell" id="b4" onClick="clicked('b4');">&nbsp;</td> <td class="bcell" id="b5" onClick="clicked('b5');">&nbsp;</td> </tr> <tr> <td class="bcell" id="b6" onClick="clicked('b6');">&nbsp;</td> <td class="bcell" id="b7" onClick="clicked('b7');">&nbsp;</td> <td class="bcell" id="b8" onClick="clicked('b8');">&nbsp;</td> </tr> </table> </body> </html>