尝试调用函数时出现Javascript错误

时间：2016-12-07 01:30:46

标签： javascript html

我尝试在javascript中调用函数时不断出错。代码如下：

<!DOCTYPE html>
<html>

<head>
  <title>Tic Tac Toe</title>
  <SCRIPT TYPE="TEXT/JAVASCRIPT">
    var xTurn = true;
    var gameOver = false;
    var numMoves = 0;


    function squareclicked(square) {
      // squareclicked is a function that is called whenever a button is clicked.

      var status = document.getElementById('status');
      var value = square.value;
      if (gameOver) {
        alert("The game is already over.");
        return;
      }


      if (value != 'X' && value != 'O') {
        if (xTurn) {
          numMoves++;
          square.value = 'X';
          xTurn = false;
          status.innerHTML = 'O\'s turn';
        } else {
          numMoves++;
          square.value = 'O';
          xTurn = true;
          status.innerHTML = 'X\'s turn';
        } else
          alert('That square has already been played.');
      }
      var winner = checkWin();
      if (!winner) {
        //check to see if there is a tie
        if (numMoves == 9)
          status.innerHTML = 'Tie Game!';
      } else
        gameOver = true;
    }

    function newgame() {
      var status = document.getElementById('status');

      xTurn = true;
      status.innerHTML = 'X\'s turn';

      for (var x = 0; x < x++) {
        for (var y = 0; y < y++) {
          document.getElementById(x + '_' + y).value = ' ';
        }
      }
    }

    function checkWin() {
      var status = document.getElementById('status');
      var val0;
      var val1;
      var val2;

      // check columns
      for (var y = 0; y < y++) {
        val0 = document.getElementById('0_' + y).value;
        val1 = document.getElementById('1_' + y).value;
        val2 = document.getElementById('2_' + y).value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check rows
      for (var x = 0; x < x++) {
        val0 = document.getElementById(x + '_0').value;
        val1 = document.getElementById(x + '_1').value;
        val2 = document.getElementById(x + '_2').value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check top left to lower right diagonal
      val0 = document.getElementById('0_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('2_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // check lower left to top right diagonal
      val0 = document.getElementById('2_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('0_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // no winner yet  return false;
    }
  </script>
</head>

<body>
  <h1 style="text-align:center">Tic Tac Toe</h1>
  <p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
  <p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
  <p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
  <INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_0" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_1" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_2" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
  <P ID="status">X's turn</P>











</body>

</html>

如果按下附加代码上的任何按钮，则会出现未处理的错误。 The error i am getting according to Chrome Inspect Element 如果重要的话，我在Appache2上运行它，在Raspberry Pi Model B上运行的操作系统Rasbian（最新版本）上运行 提前谢谢

4 个答案:

答案 0 :(得分：0)

var winner = checkWin();
  if (!winner) {
    //check to see if there is a tie
    if (numMoves == 9)
      status.innerHTML = 'Tie Game!';
  } else
    gameOver = true;
}

你忘了内部的括号if：

var winner = checkWin();
  if (!winner) {
    //check to see if there is a tie
    if (numMoves == 9){
      status.innerHTML = 'Tie Game!';
    }
  } else
    gameOver = true;
}

另外，你有......其他......其他没有意义的事情：

  if (value != 'X' && value != 'O') {
    if (xTurn) {
      numMoves++;
      square.value = 'X';
      xTurn = false;
      status.innerHTML = 'O\'s turn';
    } else {
      numMoves++;
      square.value = 'O';
      xTurn = true;
      status.innerHTML = 'X\'s turn';
    } else
      alert('That square has already been played.');
  }

我认为这就是你的意思：

  if (value != 'X' && value != 'O') {
    if (xTurn) {
      numMoves++;
      square.value = 'X';
      xTurn = false;
      status.innerHTML = 'O\'s turn';
    } else {
      numMoves++;
      square.value = 'O';
      xTurn = true;
      status.innerHTML = 'X\'s turn';
    }
  } else {
      alert('That square has already been played.');
  }

你正在编写你的for循环错误。

for (var x = 0; x < x++) {
    for (var y = 0; y < y++) {
      document.getElementById(x + '_' + y).value = ' ';
    }
  }
}

应该是

for (var x = 0; x < <number>; x++) {
    for (var y = 0; y < <number>; y++) {
        document.getElementById(x+"_"+y).value=" ";
    }
}

答案 1 :(得分：0)

首先你的if else语句是错误的。 其次根据错误调用此函数存在一些问题。请检查一下。

答案 2 :(得分：0)

问题是你没有正确编写for循环：

他们应该写成：

for (var x = 0; x < 2; x++)


    var xTurn = true;
    var gameOver = false;
    var numMoves = 0;


    function squareclicked(square) {
      // squareclicked is a function that is called whenever a button is clicked.

      var status = document.getElementById('status');
      var value = square.value;
      if (gameOver) {
        alert("The game is already over.");
        return;
      }


      if (value != 'X' && value != 'O') {
        if (xTurn) {
          numMoves++;
          square.value = 'X';
          xTurn = false;
          status.innerHTML = 'O\'s turn';
        } else {
          numMoves++;
          square.value = 'O';
          xTurn = true;
          status.innerHTML = 'X\'s turn';
        }
      } else
        alert('That square has already been played.');

    var winner = checkWin();
    if (!winner) {
      //check to see if there is a tie
      if (numMoves == 9)
        status.innerHTML = 'Tie Game!';
    } else
      gameOver = true;
    }

    function newgame() {
      var status = document.getElementById('status');

      xTurn = true;
      status.innerHTML = 'X\'s turn';

      for (var x = 0; x < 2; x++) {
        for (var y = 0; y < 2; y++) {
          document.getElementById(x + '_' + y).value = ' ';
        }
      }
    }

    function checkWin() {
      var status = document.getElementById('status');
      var val0;
      var val1;
      var val2;

      // check columns
      for (var y = 0; y <2; y++) {
        val0 = document.getElementById('0_' + y).value;
        val1 = document.getElementById('1_' + y).value;
        val2 = document.getElementById('2_' + y).value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check rows
      for (var x = 0; x < 2; x++) {
        val0 = document.getElementById(x + '_0').value;
        val1 = document.getElementById(x + '_1').value;
        val2 = document.getElementById(x + '_2').value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check top left to lower right diagonal
      val0 = document.getElementById('0_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('2_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // check lower left to top right diagonal
      val0 = document.getElementById('2_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('0_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // no winner yet  return false;
    }
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1 style="text-align:center">Tic Tac Toe</h1>
  <p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
  <p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
  <p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
  <INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_0" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_1" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_2" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
  <P ID="status">X's turn</P>

</body>

</html>

答案 3 :(得分：-1)

<!DOCTYPE html>
<html>

<head>
  <title>Tic Tac Toe</title>
  <SCRIPT TYPE="TEXT/JAVASCRIPT">
    var xTurn = true;
    var gameOver = false;
    var numMoves = 0;


    function squareclicked(square) {
      // squareclicked is a function that is called whenever a button is clicked.

      var status = document.getElementById('status');
      var value = square.value;
      if (gameOver) {
        alert("The game is already over.");
        return;
      }


      if (value != 'X' && value != 'O') {
        if (xTurn) {
          numMoves++;
          square.value = 'X';
          xTurn = false;
          status.innerHTML = 'O\'s turn';
        } else {
          numMoves++;
          square.value = 'O';
          xTurn = true;
          status.innerHTML = 'X\'s turn';
        } else { // <=======================maybe?======================
          alert('That square has already been played.');
      }
      var winner = checkWin();
      if (!winner) {
        //check to see if there is a tie
        if (numMoves == 9)
          status.innerHTML = 'Tie Game!';
      } else
        gameOver = true;
    }

    function newgame() {
      var status = document.getElementById('status');

      xTurn = true;
      status.innerHTML = 'X\'s turn';

      for (var x = 0; x < x++) {
        for (var y = 0; y < y++) {
          document.getElementById(x + '_' + y).value = ' ';
        }
      }
    }

    function checkWin() {
      var status = document.getElementById('status');
      var val0;
      var val1;
      var val2;

      // check columns
      for (var y = 0; y < y++) {
        val0 = document.getElementById('0_' + y).value;
        val1 = document.getElementById('1_' + y).value;
        val2 = document.getElementById('2_' + y).value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check rows
      for (var x = 0; x < x++) {
        val0 = document.getElementById(x + '_0').value;
        val1 = document.getElementById(x + '_1').value;
        val2 = document.getElementById(x + '_2').value;
        if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
          status.innerHTML = "X WINS!";
          return true;
        } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
          status.innerHTML = "O WINS!";
          return true;
        }
      }

      // check top left to lower right diagonal
      val0 = document.getElementById('0_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('2_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // check lower left to top right diagonal
      val0 = document.getElementById('2_0').value;
      val1 = document.getElementById('1_1').value;
      val2 = document.getElementById('0_2').value;
      if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
        status.innerHTML = "X WINS!";
        return true;
      } else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
        status.innerHTML = "O WINS!";
        return true;
      }

      // no winner yet  return false;
    }
  </script>
</head>

<body>
  <h1 style="text-align:center">Tic Tac Toe</h1>
  <p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
  <p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
  <p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
  <INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_0" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_0" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_1" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_1" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="1_2" VALUE="	" ONCLICK="squareclicked(this);">
  <INPUT TYPE="BUTTON" ID="2_2" VALUE="	" ONCLICK="squareclicked(this);">
  <BR>
  <INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
  <P ID="status">X's turn</P>











</body>

</html>

相关问题
最新问题