CSC170: Introductory Computer Programming

Lab 9


Tic-Tac-Toe

Finish the Tic-Tac-Toe board evalution program we discussed in class. Use the program over the following board.

In the class, we used 9 prompt()'s to obtain the board. It's quite tedious. We can in fact set the board in HTML and retrieve the information from the page. This relies on the so-called DOM (Document Object Model), which we'll talk about soon. For now, just copy the following code and try.

xoo
xxo
oox
The above table is created using:
<table id="ttt" cellpadding=5 align="center">
<tr><td id="t11">x</td><td id="t12">o</td><td id="t13">o</td></tr>
<tr><td id="t21">x</td><td id="t22">x</td><td id="t23">o</td></tr>
<tr><td id="t31">o</td><td id="t32">o</td><td id="t33">x</td></tr>
</table>
You need the following code to retrieve the content of the board.
var t11 = document.getElementById('t11').childNodes.item(0).data;
var t12 = document.getElementById('t12').childNodes.item(0).data;
var t13 = document.getElementById('t13').childNodes.item(0).data;

var t21 = document.getElementById('t21').childNodes.item(0).data;
var t22 = document.getElementById('t22').childNodes.item(0).data;
var t23 = document.getElementById('t23').childNodes.item(0).data;

var t31 = document.getElementById('t31').childNodes.item(0).data;
var t32 = document.getElementById('t32').childNodes.item(0).data;
var t33 = document.getElementById('t33').childNodes.item(0).data;


if(t11=="x" && t12=="x" && t13=="x") {
    document.write("x won.");
}