title: Uncaught TypeError: Cannot set property 'innerText' of null - possible syntax error
body: <p>Working on a simple Tic Tac Toe game to better my JS but am stuck with this error msg. My "console.log("message");" returns what it should display " Game is ready. Player X turn." Its a single file with my script tags at the end just above my <code>&lt;/body&gt;</code> tag. It's pretty basic. Any help would be appreciated. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Display = function(displayElement) {      // create 'class' to eliminate many 'innerText' usage 
   var display = displayElement;        // and makes it easy to port to say android
   function setText(message) {
    console.log(message);
    display.innerText = message;
   }
  
   return {setMessage: setText};
  };
  
   function isValid(button) {          //if text within then not valid; if 0 then valid; any 
    return button.innerText.length == 0;      //characters then invalid
   }
  
   function checkForWinner(squares, players, currentTurn) {
    if (squares[0].innerText == players[currentTurn] &amp;&amp;
     squares[1].innerText == players[currentTurn] &amp;&amp;
     squares[2].innerText == players[currentTurn])
     return true;
    if (squares[3].innerText == players[currentTurn] &amp;&amp;
     squares[4].innerText == players[currentTurn] &amp;&amp;
     squares[5].innerText == players[currentTurn])
     return true;
    if (squares[6].innerText == players[currentTurn] &amp;&amp;
     squares[7].innerText == players[currentTurn] &amp;&amp;
     squares[8].innerText == players[currentTurn])
     return true;
    if (squares[0].innerText == players[currentTurn] &amp;&amp;
     squares[3].innerText == players[currentTurn] &amp;&amp;
     squares[6].innerText == players[currentTurn])
     return true;
    if (squares[1].innerText == players[currentTurn] &amp;&amp;
     squares[4].innerText == players[currentTurn] &amp;&amp;
     squares[7].innerText == players[currentTurn])
     return true;
    if (squares[2].innerText == players[currentTurn] &amp;&amp;
     squares[5].innerText == players[currentTurn] &amp;&amp;
     squares[8].innerText == players[currentTurn])
     return true;
    if (squares[0].innerText == players[currentTurn] &amp;&amp;
     squares[4].innerText == players[currentTurn] &amp;&amp;
     squares[8].innerText == players[currentTurn])
     return true;
    if (squares[2].innerText == players[currentTurn] &amp;&amp;
     squares[4].innerText == players[currentTurn] &amp;&amp;
     squares[6].innerText == players[currentTurn])
     return true;
   }
  
   function setMark(button, mark) {
    button.innerText = mark;
   }
  
   function main() {
    var squares = document.querySelectorAll("#game button"); // returns array of all the buttons
    var players = ["X", "O"];         // text displayed in the button
    var currentTurn = 0;           // either will be 0 or 1
    var isGameOver = false;          // boolean either T or F
    var display = new Display(document.querySelector("gameActionDisplay")); //reference to msg      
  
    display.setMessage("Game is ready. Player " + players[currentTurn] + " turn.");
  
    for (var i = 0, len = squares.length; i&lt;len; i++) {   //for loop to iterate through squares; set local var len
     squares[i].addEventListener("click", function() {
      if (isGameOver)
       return;
  
      if(!isValid(this)) {
       display.setMessage("Invalid move bud!");
      } else {
       setMark(this, players[currentTurn]);
  
       isGameOver = checkForWinner(squares, players, currentTurn);
  
       //Game is over
  
       //Game is draw
  
       //Game is not over yet; play on
       currentTurn++;         // mod remainder toggles between 1 and 0    
       currentTurn = currentTurn % 2;
  
       display.setMessage("Player " + players[currentTurn] + " move");
  
      }
     });
    }
   }
  
   main();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;div id="game"&gt;
     &lt;div&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
     &lt;/div&gt;
     &lt;div&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
     &lt;/div&gt;
     &lt;div&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
    &lt;button&gt;&lt;/button&gt;
     &lt;/div&gt;
  
     &lt;div id="gameActionDisplay"&gt;&lt;/div&gt;
  
  
   &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>