Science Buddies: "Ask an Expert"

Posted: **Sun Apr 29, 2018 10:17 am**

I can't get this function to work in this coding project

function newgame()
{
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 = ' ';
}
}
}

I also can't get the global variables to work in this program either.

<SCRIPT TYPE="TEXT/JAVASCRIPT">
var global gameOver = false;
</script>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var global numMoves = 0 ;
</script><SCRIPT TYPE="TEXT/JAVASCRIPT">
var global gameOver = false
</script>

The code so far looks like this

<html>
<head>
<style>
.Square {
width: 40px;
height: 40px;
text-align: center;
font-size: 18pt;
font-weight: bold;
font-family: Verdana;
}
</style>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var global gameOver = false;
</script>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var global numMoves = 0 ;
</script><SCRIPT TYPE="TEXT/JAVASCRIPT">
var global gameOver = false
</script>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
v
function newgame()
{
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>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function checkWin()
{
var status = document.getElementById('status');
var val0;
var val1;
var val2;

// check columns
for(var y = 0; y < y++)
{
val0 = document.getElementById('0_'+y).value;
val1 = document.getElementById('1_'+y).value;
val2 = document.getElementById('2_'+y).value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}
}

// check rows
for(var x = 0; x < x++)
{
val0 = document.getElementById(x + '_0').value;
val1 = document.getElementById(x + '_1').value;
val2 = document.getElementById(x + '_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}
}

// check top left to lower right diagonal
val0 = document.getElementById('0_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('2_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}

// check lower left to top right diagonal
val0 = document.getElementById('2_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('0_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}

// no winner yet return false;
}
</SCRIPT>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
var xTurn = true;
</SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var gameOver = false;
</SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var numMoves = 0;
</SCRIPT>

<SCRIPT TYPE="TEXT/JAVASCRIPT">

function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
var value = square.value;
if(value != 'X' && value != 'O')
{
if(xTurn)
{
square.value = 'X';
xTurn = false;
}
else
{
square.value = 'O';
xTurn = true;
}
}
else
alert('That square has already been played.');
}

</SCRIPT>

<SCRIPT TYPE="TEXT/JAVASCRIPT">

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.');
}
</SCRIPT>

</head>

<body>
<h1>Welcome To My Tic Tac Toe Game!</h1>

<table>
<BR>
<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></td>

</tr>
</table>

<P ID="status">X's turn</P>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame(this);">
</body>
</html>

Thanks Nathan

Posted: **Wed May 02, 2018 12:49 pm**

Nathandonnelly:

Thank you for using the Science Buddies fora.

I popped your code into Atom, brought up my browser and made a few observations.

1) Your for( loop syntax is erroneous. The proper syntax for a for( loop is as follows:

for(var someTempVar = 0; someCondition; someTempVar++)

Note that the first and third statements are optional, allowing the bare minimum to be:

for(; someCondition; )

The semicolons (';') are not optional.

When the for( loop runs, it initializes (creates and assigns a value to) someTempVar. It immediately checks someCondition. If someCondition is false, the loop breaks; otherwise, the loop runs. This is where your code goes wrong. You wrote:

for(var y=0; y<y++)

I believe that you are missing a semicolon, but, more importantly, the conditional "y<y++" always evaluates to false. This is because "y++" returns y, and y is never less than itself (y == y is always true). Therefore, since the conditional in the for( loop evaluates to false, the loop is skipped and never runs.

Try writing your for( loops like this:

for(var y=0; y<3; y++)

This ensures that the program checks each of three elements exactly once.

2) Your global variables do work. You never called any methods to use them. Testing with an alert( command, I was able to verify that gameOver exists and retains its value. When troubleshooting code like this, always try to create some visible output from parts of code you think aren't working correctly. It is much simpler to verify that gameOver is working by displaying it on the screen rather than trying to figure out a variable that is completely hidden from the user.

3) This may or may not impact your program's execution, but it should help you write your program. Try to keep everything within one set of <SCRIPT> tags. You have several areas where you have three separate tags! It is hard to determine how, if, and when this code runs. Nothing calls it. I suppose it runs once, when the webpage loads?

I hope this helps. Let me know if you need anything else.

Science Buddies: "Ask an Expert"

Need help with this function and the global variables

Need help with this function and the global variables

Re: Need help with this function and the global variables