square_clicked function
function square_clicked(el) {
  el.textContent='X';
}

Well, that's all the easy stuff - now we move on to the more interesting part of this tute. Once again I find it easiest if we have an array behind the scenes that mirrors the display - like we did in the Game of Life.

So we'll need a global array, g_squares[].
Don't forget to add globals.js to the head section of index.html.

globals.js
var g_squares=[];

My idea is that the array will start off with zeroes which will change to one when clicked. Then to check for XXX, all we have to do is the add the values for (say) a row. If the total is three then we have an XXX. Neat eh?

index.html
    <script>squares(); setup();</script>
setup function
function setup() {
  for (var i=0;i<9;i++) g_squares[i]=0;
}
square_clicked function
function square_clicked(el) {
  el.textContent='X';
  var id=el.id;
  g_squares[id]=1;
}