Program won't work in FireFox

Question

I made this simple program for school and it works fine when I run it on Explorer or Chrome, but it won't work on Firefox. It needs to run on Firefox, because that is the only brower my school allows for this particular project. Not sure what to fix... can someone put me in the right direction to allow this to run in Firefox. Here is my program:

function startGame() {
  for (var i = 1; i <= 9; i = i + 1) {
    clearBox(i);
  }

  document.turn = "X";
  if (Math.random() < 0.5) {
    document.turn = "O";
  }
  document.winner = null;
  setMessage(document.turn + " gets to start.");
}

function setMessage(msg) {
  document.getElementById("message").innerText = msg;
}

function nextMove(square) {
  if (document.winner != null) {
    setMessage(document.winner + " Already Wone the Game!");
  } else if (square.innerText == "") {
    square.innerText = document.turn;
    switchTurn();
  } else {
    setMessage("That Square is Already Used.")
  }
}

function switchTurn() {
  if (checkForWinner(document.turn)) {
    setMessage("Contratulations " + document.turn + "! You Win!");
    document.winner = document.turn;
  } else if (document.turn == "X") {
    document.turn = "O";
    setMessage("It's " + document.turn + "'s turn!");
  } else {
    document.turn = "X";
    setMessage("It's " + document.turn + "'s turn!");
  }
}

function checkForWinner(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 && getBox(b) == move && getBox(c) == move) {
    result = true;
  }
  return result;
}

function getBox(number) {
  return document.getElementById("s" + number).innerText;
}

function clearBox(number) {
  document.getElementById("s" + number).innerText = "";
}

.Square {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 18pt;
  font-weight: bold;
  font-family: Verdana;
}

<h1> Tic-Tac-Toe!</h1>
<div id="message">message will be here</div>
<table border="1">
  <tr>
    <td id="s1" class="Square" onclick="nextMove(this);"></td>
    <td id="s2" class="Square" onclick="nextMove(this);"></td>
    <td id="s3" class="Square" onclick="nextMove(this);"></td>
  </tr>
  <tr>
    <td id="s4" class="Square" onclick="nextMove(this);"></td>
    <td id="s5" class="Square" onclick="nextMove(this);"></td>
    <td id="s6" class="Square" onclick="nextMove(this);"></td>
  </tr>
  <tr>
    <td id="s7" class="Square" onclick="nextMove(this);"></td>
    <td id="s8" class="Square" onclick="nextMove(this);"></td>
    <td id="s9" class="Square" onclick="nextMove(this);"></td>
  </tr>
</table>
<a href="javascript:startGame();"> Start New Game</a>

How does it fail? Is there an error in the Javascript console? — Barmar, Feb 10 '15 at 00:16

score 0 · Answer 1 · answered Feb 10 '15 at 00:17

0

FF does not understand innerText. Use textContent instead – https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent.

Or you caan use jQuery – it provides .text() method that works fine in any browser.

answered Feb 10 '15 at 00:17

ermouth

835
7
12

score 0 · Accepted Answer · answered Feb 10 '15 at 00:17

Your problem is that you are using the non-standard innerText property. Use the standards-based textContent property instead.

Example:

<html>
<head>
<style>
    .Square{
    width:60px;
    height:60px;
    text-align:center;
    font-size: 18pt;
    font-weight: bold;
    font-family: Verdana;
    }
</style>

    <script>
        function startGame()
            {
                for (var i = 1; i<= 9; i = i + 1)
                {
                    clearBox(i);
                }

            document.turn = "X";
            if (Math.random()< 0.5)
            {
                document.turn = "O";
            }
            document.winner = null;
            setMessage(document.turn + " gets to start.");
        }

        function setMessage(msg)
        {
        document.getElementById("message").textContent = msg;
        }

        function nextMove(square)
        {
            if (document.winner != null)
            {
                setMessage(document.winner + " Already Wone the Game!");
            }
            else if (square.textContent == "")
            {
                square.textContent = document.turn;
                switchTurn();
            }
            else
            {
                setMessage("That Square is Already Used.")
            }
        }

        function switchTurn()
        {
            if(checkForWinner(document.turn))
            {
                setMessage("Contratulations " + document.turn + "! You Win!");
                document.winner = document.turn;
            }
                else if (document.turn == "X")
                    {
                        document.turn ="O";
                        setMessage("It's " + document.turn + "'s turn!");
                    }
                else
                {
                    document.turn ="X";
                    setMessage("It's " + document.turn + "'s turn!");
                }
        }

        function checkForWinner(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 && getBox(b)== move && getBox(c)== move)
            {
            result = true;
            }
            return result;
        }

        function getBox(number)
        {
            return document.getElementById("s" + number).textContent;
        }

        function clearBox(number)
        {
            document.getElementById("s" + number).textContent = "";
        }

    </script>

   </head>

    <body onload= "startGame();">
<h1> Tic-Tac-Toe!</h1>
<div id="message">message will be here </div>
<table border= "1">
    <tr>
        <td id="s1" class= "Square" onclick="nextMove(this);"></td>
        <td id="s2" class= "Square" onclick="nextMove(this);"></td>
        <td id="s3" class= "Square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
        <td id="s4" class= "Square" onclick="nextMove(this);"></td>
        <td id="s5" class= "Square" onclick="nextMove(this);"></td>
        <td id="s6" class= "Square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
        <td id="s7" class= "Square" onclick="nextMove(this);"></td>
        <td id="s8" class= "Square" onclick="nextMove(this);"></td>
        <td id="s9" class= "Square" onclick="nextMove(this);"></td>
    </tr>
</table>
<a href= "javascript:startGame();"> Start New Game</a>
 </body>
 </html>

Program won't work in FireFox

2 Answers2

Example: