Question

我为学校制作了这个简单的程序，当我在资源管理器或Chrome上运行它时它工作正常，但它不适用于Firefox。它需要在Firefox上运行，因为这是我的学校允许这个特定项目的唯一浏览器。不确定要修复什么...有人可以让我朝着正确的方向让我在Firefox中运行。这是我的计划：

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>

Answer 1

FF无法理解innerText。请改用textContent - https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent。

或者你可以使用jQuery - 它提供了.text（）方法，可以在任何浏览器中正常工作。

Answer 2

您的问题是您使用的是非标准innerText属性。请改用基于标准的textContent属性。

实施例

＆＃13;

<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>

＆＃13;

程序在FireFox中不起作用

2 个答案:

实施例