title: Javascript tic tac toe onclick only once
body: <p>Hello I am trying to finish my program. I am about two steps away from finishing but i'm stuck on how i can make it so once a box is clicked you can't click on it again until you restart the game. </p>
  
  <p>Here is my JavaScript code: </p>
  
  <pre><code>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.id == "cell1x1") {
          document.getElementById("cell1x1").innerHTML = "X";
          document.getElementById("cell1x1").innerHTML = nextTurn;
          playersTurn();
  
      } else if (cell.id == "cell1x2") {
          document.getElementById("cell1x2").innerHTML = "X";
          document.getElementById("cell1x2").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell1x3") {
          document.getElementById("cell1x3").innerHTML = "X";
          document.getElementById("cell1x3").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell2x1") {
          document.getElementById("cell2x1").innerHTML = "X";
          document.getElementById("cell2x1").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell2x2") {
          document.getElementById("cell2x2").innerHTML = "X";
          document.getElementById("cell2x2").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell2x3") {
          document.getElementById("cell2x3").innerHTML = "X";
          document.getElementById("cell2x3").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell3x1") {
          document.getElementById("cell3x1").innerHTML = "X";
          document.getElementById("cell3x1").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell3x2") {
          document.getElementById("cell3x2").innerHTML = "X";
          document.getElementById("cell3x2").innerHTML = nextTurn;
          playersTurn();
      } else if (cell.id == "cell3x3") {
          document.getElementById("cell3x3").innerHTML = "X";
          document.getElementById("cell3x3").innerHTML = nextTurn;
          playersTurn();
  
      }
  }
  
  function playersTurn() {
      if (nextTurn == 'X') {
          nextTurn = 'O';
      } else {
          nextTurn = 'X';
      }
  }
  
  
  function startNewGame() {
      location.reload(true);
  }
  </code></pre>
  
  <p>Here's my HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt;Tic Tac Toe&lt;/title&gt;
  &lt;head&gt;
        &lt;script type="text/javascript" src="tictactoe.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="tictactoestyle.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="playersTurn"&gt;&amp;nbsp;&lt;/div&gt;
   &lt;div id="winnerIs"&gt;&lt;/div&gt;
   &lt;table id="tttTable" align="center"&gt;
   &lt;tr&gt;
   &lt;td id="cell1x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
   &lt;td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
   &lt;td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
     &lt;td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
     &lt;td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;input id="newGameBtn" type="button" value="Start New Game" onclick="startNewGame();" /&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I am still very new to writing javascript so please be gentle. So how would i make it so after a person clicks on a cell it won't let anyone else click it until you reset the game?
  Thank you for your help! </p>