i'm stuck with my tic tac toe program for what seems like the 100th time. I am running my program through selenium and everything works fine except that if there is a winner announced it will still switch turns and click another box. for example if player 2 wins then it will click another box and then it will make player 1 win. How can i make it so when a winner is announced it stops switching turns?
Here is my js:
var cell;
var nextTurn = 'X';
function mouseMotion(ref,motion){
if(motion == 'over')
{
ref.style.borderColor='#E00';
}
else if(motion == 'out')
{
ref.style.borderColor='#CCC';
}
}
function cellClick(cell){
if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
{ alert ('Square has already been choosen, please select another square');
return
}
cell.innerHTML = nextTurn;
playersTurn();
winnerIs();
}
function playersTurn(){
if(nextTurn == 'X'){
nextTurn = 'O';
}
else {
nextTurn = 'X';
}
}
function winnerIs(){
if (document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell1x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell3x1").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell3x1").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell3x1").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
else if(document.getElementById("cell1x3").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
document.getElementById('winnerIs').style.display = 'block';
}
}
function startNewGame(){
location.reload(true);
}
Here is my HTML:
<html>
<title>Tic Tac Toe</title>
<head>
<script type="text/javascript" src="tictactoe.js"></script>
<link rel="stylesheet" type="text/css" href="tictactoestyle.css">
</head>
<body>
<div id="playersTurn"> </div>
<div id="winnerIs"></div>
<table id="tttTable" align="center">
<tr>
<td id="cell1x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
</tr>
<tr>
<td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
</tr>
<tr>
<td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
<td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"> </td>
</tr>
</table>
<input id="newGameBtn" type="button" value="Start New Game" onclick="startNewGame();" />
</body>
</html>
And here is my CSS:
#tttTable
{
width: 600px;
height: 600px;
}
.cell
{
width: 200px;
height: 200px;
border: 1px solid #CCC;
text-align: center;
font-weight: bold;
font-size: 4em;
}
#newGameBtn
{
margin-left: 46%;
}
#playersTurn
{
text-align: center;
font-weight: bold;
font-size: 1.1em;
height: 10px;
}
#outer
{
width: 600px;
}
#winnerIs
{
background-color: #EEE;
text-align: center;
font-weight: bold;
font-size: 5em;
width:700px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-350px;
display: none;
}
Thank you for taking the time to read my code and help me. If you seen anything i could improve upon then i would love to hear what you have to say. Thank you again!