2016-12-07 3 views
0

Я постоянно получаю сообщение об ошибке при попытке вызвать функцию в javascript. Код выглядит следующим образом:Ошибка 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=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_2" VALUE=" \t " 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, на операционной системе Rasbian (последняя версия), которые бежали на Raspberry Pi Model B Спасибо заранее

+7

Вы 'если .. еще. . else', который недействителен. – choz

+0

можете ли вы показать, как выглядит ошибка? – neoDev

+0

Я отредактировал исходное сообщение. –

ответ

-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=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_2" VALUE=" \t " 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>

+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; 
} 

Вы забыли скобки внутренней, если:

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 (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=" "; 
    } 
} 
+0

Я пробовал это, но я все еще получаю ту же ошибку. –

+0

@bob См. Мое редактирование. – OldBunny2800

0

Сначала ваше, если иное утверждение неверно. Во-вторых, в связи с ошибкой возникает некоторая проблема при вызове этой функции. Пожалуйста, проверьте это тоже.

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=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_0" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_1" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <BR> 
 
    <INPUT TYPE="BUTTON" ID="0_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="1_2" VALUE=" \t " ONCLICK="squareclicked(this);"> 
 
    <INPUT TYPE="BUTTON" ID="2_2" VALUE=" \t " 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>

+0

Новая игра не очищает доску выше, но вы получаете идею –

+0

И я добавил недостающую скобку к вашей проблеме с несколькими 'else', как указано в приведенных выше комментариях –

Смежные вопросы