我为学校制作了这个简单的程序，当我在资源管理器或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>
答案 0 :(得分：0)
FF无法理解innerText。请改用textContent - https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent。
或者你可以使用jQuery - 它提供了.text（）方法，可以在任何浏览器中正常工作。
答案 1 :(得分：0)
您的问题是您使用的是非标准innerText属性。请改用基于标准的textContent属性。
<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>