HTML Forms

We will create a JavaScript Tic-Tac-Toe game. This will illustrate using the onClick() event handler with a form element. It also will illustrate the use of a "hidden" field, the use of "if" statements, and the use of looping.

We will start by creating a single Tic-Tac-Toe square. Eventually, of course, we will need nine squares.

The basic idea is that we represent a square on a Tic-Tac-Toe board as a textbox inside a form. When you click on the box, an "x" or an "o" will appear. For example, to get an "x" to appear, we can use the following code:

<html>
<head>
<script language = "JavaScript">
function makemove(form){
form.square.value = "X"
}
</script>
</head>
<body>
<form>
<input type = "text" size = "1" name = "square"
onClick = "makemove(this.form)">
</form>
</body>
</html>

Create a page called "tictactoe.html" and copy the code above onto that page. When you view the file, try clicking in the textbox. An "X" should appear. Now, go back to the code and modify it so that an "O" appears.

Of course, whether an "X" or an "O" should appear depends on whose turn it is to move. To make that happen, we create a hidden field inside the form that tells us whose turn it is to move. Right under the <form> tag, put

Now, we modify the JavaScript code to have it alternate the player's turn. Replace the JavaScript on your tictactoe page with this:

This code says that if X takes a turn, then we put an "X" in the box and change the player's turn to O. Otherwise (else), we put an "O" in the box and change the player's turn to X. View the tictactoe page with this new code and try clicking in the box multiple times.

Of course, in real Tic-Tac-Toe, once a square is occupied no one else can move there. So we need a function that tests whether or not the square is occupied before someone moves there. Inside the HTML code, replace onClick = "makemove(this.form)" with onClick = "trymove(this.form)", and add this to your JavaScript code:

function trymove(form){//start function
if (form.square.value == ""){//start if clause
makemove(form);//call the other function
}//end if clause
else{//start else clause
alert("You can't move here!");
}
}

What trymove() does is test to see if the square is empty before it lets you move. Now, try your tictactoe page. What should happen is that the first time you click, it changes to X, but the next time you click it says you can't move here.

Now that we have one square working the way we want, how about two squares? To get another square, copy all of the code starting with <form> and ending with </form> and paste it in. What happens when you click in both boxes?

The reason that you got an X in both boxes is that the hidden field called "mover" in each form is separate. When you change the field on one form, you do not change the field in the other form.

So we have to modify the JavaScript code to change the "mover" field in each square. To do this, we create a "loop" through all of the forms on the page. To let the computer know how many squares are on the page, we create a variable called nforms and set its value equal to 2, which is the number of squares.

Put the statement nforms = 2; right under the line function makemove(form){ in your JavaScript.

for(var i = 0; i < nforms; i++){//start loop
document.forms[i].mover.value = "O";
}//end loop

In your JavaScript, replace the line form.mover.value = "O"; with the loop statement. What other line of code needs to be replaced with a loop statement? What needs to be different about the second loop statement?

What the loop statement does is it "loops through" every form on your document and in each one it resets the mover value. That way, when a player moves in one square, all of the squares know that it is the other player's turn.

Try the latest version of your tictactoe page. Next, create a 3x3 table with nine forms on your tictactoe page. Before the board will work properly, you will have to change one number in the JavaScript. Do you know what it is?

Page created by Arnold Kling. Last Modified November 4, 2001.