Computer Tic Tac Toe: Button Problem
Posted: Thu Jun 15, 2023 1:16 pm
Hi, I am working on the Artificial Intelligence: Teaching the Computer to Play Tic-Tac-Toe project. I got to the 6th step without any problems; however, after updating the code related to starting a new game, the buttons for the regular squares are not working. I have not changed anything from the recommended code. I think the problem is in the newgame function section since the x and o buttons work fine without that function. Thank you in advance for your time!
Here is a copy of my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var xTurn = true;
function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
var status = document.getElementById('status');
var value = square.value;
if (value != 'X' && value != 'O')
{
if (xTurn)
{
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
}
else
{
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
}
else
alert('That square has already been played.');
}
function newgame()
//newgame is a function that resets the game when called.
{
var status = document.getElementById('status');
xTurn = true;
status.innerHTML = 'X\'s turn';
for(var x = 0; x < x++)
{
for(var y = 0; y < y++)
{
document.getElementById(x + '_' + y).value = ' ';
}
}
}
</script>
</head>
<body>
<input type="button" id="0_0" value=" " onclick="squareclicked(this);">
<input type="button" id="1_0" value=" " onclick="squareclicked(this);">
<input type="button" id="2_0" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="0_1" value=" " onclick="squareclicked(this);">
<input type="button" id="1_1" value=" " onclick="squareclicked(this);">
<input type="button" id="2_1" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="0_2" value=" " onclick="squareclicked(this);">
<input type="button" id="1_2" value=" " onclick="squareclicked(this);">
<input type="button" id="2_2" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="newgame" value="New Game" onclick="newgame();">
<P ID="status">X's turn</P>
</body>
</html>
Here is a copy of my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var xTurn = true;
function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
var status = document.getElementById('status');
var value = square.value;
if (value != 'X' && value != 'O')
{
if (xTurn)
{
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
}
else
{
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
}
else
alert('That square has already been played.');
}
function newgame()
//newgame is a function that resets the game when called.
{
var status = document.getElementById('status');
xTurn = true;
status.innerHTML = 'X\'s turn';
for(var x = 0; x < x++)
{
for(var y = 0; y < y++)
{
document.getElementById(x + '_' + y).value = ' ';
}
}
}
</script>
</head>
<body>
<input type="button" id="0_0" value=" " onclick="squareclicked(this);">
<input type="button" id="1_0" value=" " onclick="squareclicked(this);">
<input type="button" id="2_0" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="0_1" value=" " onclick="squareclicked(this);">
<input type="button" id="1_1" value=" " onclick="squareclicked(this);">
<input type="button" id="2_1" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="0_2" value=" " onclick="squareclicked(this);">
<input type="button" id="1_2" value=" " onclick="squareclicked(this);">
<input type="button" id="2_2" value=" " onclick="squareclicked(this);">
<br>
<input type="button" id="newgame" value="New Game" onclick="newgame();">
<P ID="status">X's turn</P>
</body>
</html>