title: Reset button and clear the board
body: <p>I finally made my game work... The only problem is when I reset the page clicking on my reset button it would yes clear the board but It won't allow me to play any longer..How can I solve this problem?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt;Tic Tac Toe&lt;/h1&gt;
  
  &lt;div id="message"&gt; &lt;/div&gt;
  
  &lt;button id="reset" &gt; Reset&lt;/button&gt;
  &lt;div class="console"&gt;
  
     &lt;div id="firstRow"&gt;
        &lt;div id="box1" class="box"&gt;&lt;/div&gt;
        &lt;div id="box2" class="box"&gt;&lt;/div&gt;
        &lt;div id="box3" class="box"&gt;&lt;/div&gt;
     &lt;/div&gt;
  
  
     &lt;div class="secondRow"&gt;
        &lt;div id="box4" class="box"&gt;&lt;/div&gt;
        &lt;div id="box5" class="box"&gt; &lt;/div&gt;
        &lt;div id="box6" class="box"&gt; &lt;/div&gt;
     &lt;/div&gt;
  
  
     &lt;div class="thirdRow"&gt;
        &lt;div id="box7" class="box"&gt;&lt;/div&gt;
        &lt;div id="box8" class="box"&gt; &lt;/div&gt;
        &lt;div id="box9" class="box"&gt; &lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  
    JAVASCRIPT
  
   var turn = "X";
   var  winner = null; // to change player's turnn at the begin
  
  
    var nextMove = function(box) {
      if(winner !== null){
      setMessage(winner +" already won the game");
      clearBox();
     }
      else if(box.innerHTML === ""){
         box.innerHTML = turn;
         switchTurn();
       }
  
      else {
        setMessage("Choose another box.");
  
       }
    }
  
     var startGame = function() {
     for (var i =1; i &lt;= 9; i++) { //clears all my boxes
     clearBox(i);
     }
  
    setMessage(turn + " gets to start.");
    } 
  
    var setMessage = function(msg) {
    document.getElementById("message").innerHTML = msg;
    }   
  
  
  
        function switchTurn() {
  
           if(checkWinner(turn)) {
             setMessage("Congratulations, " + turn + " wins!");
             winner = turn; // whoever wins is gonna start the game
           }
  
           else if(turn === "X") {
             turn = "O";
             setMessage("It's " + turn + " turn.");
            }
  
           else {
              turn = "X";
              setMessage("Its " + turn + " turn.");
  
             }
  
           }
  
      function checkWinner(move) {
        var result = false;
        if( checkRow(1, 2, 3, move) ||
            checkRow(4, 5, 6, move) ||
            checkRow(7, 8, 9, move) ||
            checkRow(1, 4, 7, move) ||
            checkRow(2, 5, 8, move) ||
            checkRow(3, 6, 9, move) ||
            checkRow(1, 5, 9, move) ||
            checkRow(3, 5, 7, move)) {
  
          result = true;
        }
  
        return result;
  
      }
  
      function checkRow(a, b, c, move) {
        var result = false;
        if(getBox(a) === move &amp;&amp; getBox(b) === move &amp;&amp; getBox(c) === move) {
          result = true;
        }
  
        return result;
      }
  
      function getBox(number) {
        return document.getElementById("box" + number).innerHTML;
  
      }
  
      function clearBox(number) {
        return document.getElementById("box" + number).innerHTML = "";
      }
  
  
   var btnReset = document.getElementById('reset');
  
    btnReset.addEventListener('click', function() {
        startGame();
  
     });
  
   var consoleDiv = document.getElementsByClassName("console")[0];
  
    consoleDiv.addEventListener("click", function(event) {
      // event.target === the box to go in
     nextMove(event.target);
     var hasWon = checkWinner();
  
  
  });
  
   startGame();
  </code></pre>