Tic tac Toe javascript stop switching turns after winner has been announced

Question

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">&nbsp;</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');">&nbsp;</td>
  <td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  </tr>
 <tr>
   <td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   </tr>
  <tr>
  <td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  <td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</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!

Answer 1

When player wins you make "winnerIs" DIV visible. Without adding any variables or flags you can just add this block before anything else into function function cellClick(cell):

if (document.getElementById("winnerIs").style.display == "block") {
   alert('Game has already been won!');
   return 
}

It will check if "winnerIs" DIV is visible and if so - will prevent further moves.

Demo: http://jsfiddle.net/zG3pm/4/

Answer 2

You could track a "game over" flag such as var gameOver = false then set that to true when you detect a winner. Then your cellClick function could ignore inputs once the game is over:

function cellClick(cell){
    if(gameOver == true)
        return;

    if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
    {
        alert ('Square has already been choosen, please select another square');
        return;
    }
    cell.innerHTML = nextTurn;
    playersTurn();
    winnerIs();
}

Note, your code still needs to handle the case of a "draw".

Answer 3

I think you can just make a variable that keeps track of whether the game has ended or not. Then in your cellClick function you only execute the code only if your variable is false.