Need help with this function and the global variables

Ask questions about projects relating to: computer science or pure mathematics (such as probability, statistics, geometry, etc...).

Moderators: AmyCowen, kgudger, bfinio, MadelineB, Moderators

Locked
nathandonnelly
Posts: 1
Joined: Sun Apr 29, 2018 10:09 am
Occupation: Student

Need help with this function and the global variables

Post by nathandonnelly »

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
Ultra
Former Student Expert
Posts: 38
Joined: Fri Aug 21, 2015 5:54 pm
Occupation: Student: Freshman in College
Project Question: Student volunteer for Ask an Expert
Project Due Date: N/A
Project Status: Not applicable

Re: Need help with this function and the global variables

Post by Ultra »

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.
For science!
- Ultra
Locked

Return to “Grades 6-8: Math and Computer Science”