2014-09-09 4 views
-5

У меня возникли проблемы с кодом javascript для веб-страницы tic tac toe. Всякий раз, когда я делаю ход эта ошибка возникает в консоли: Uncaught TypeError: string is not a function Вот ссылка моей веб-страницы: http://www.cgscomputing.com/36558/test.html А вот код: Javascript - Uncaught TypeError: строка не является функцией

<h1>Tic Tac Toe</h1> 

    <table> 

     <tr> 
      <td id = "spot1"></td> 
      <td id = "spot2"></td> 
      <td id = "spot3"></td> 
     </tr> 

     <tr> 
      <td id = "spot4"></td> 
      <td id = "spot5"></td> 
      <td id = "spot6"></td> 
     </tr> 

     <tr> 
      <td id = "spot7"></td> 
      <td id = "spot8"></td> 
      <td id = "spot9"></td> 
     </tr> 

    </table> 

    <!---Contains the message telling which players' turn it currently is-->   
    <p id = "footer"></p> 

    <script type = "text/javascript"> 

     //select a random number to decide which player goes first 
     var randNum = Math.floor((Math.random() * 2)); 

     //list which contains what is printed to the document concerning the turn 
     var beginTurn = ["Computer's ", "Your "]; 
     var turn = beginTurn[randNum]; 

     //print who's turn it is underneath the board 
     var footer = document.getElementById("footer"); 
     footer.innerHTML = turn + " turn"; 

     //array containing all the possible combinations through which a player can win the game 
     var possibleCombinations = [[2, 5, 8], [3, 5, 7], [6, 5, 4], [9, 5, 1], [1, 2, 3], [7, 8, 9], [1, 4, 7], [3, 6, 9]]; 

     //through the game, keeps track if there is a winner or not 
     var won = false; 

     //when true, the player will not be able to place another marker on the board, and will have to wait for the computer to put in a marker first 
     var computerTurn = false; 

     //function for the computer to find a spot to place its marker in the board 
     function findLocation() { 

      for (var n = 0; n < 8; n++) { 

       //The computer first checks if it can win by placing one more insertMarker on the board 

       if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "")) { 
        return possibleCombinations[n][2]; 
        break; 
       } 
       else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "O")) { 
        return possibleCombinations[n][1]; 
        break; 
       } 
       else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "O")) { 
        return possibleCombinations[n][0]; 
        break; 
       } 

       //If the computer cannot win, it checks if it can block the human player 

       else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "")) { 
        return possibleCombinations[n][2]; 
        break; 
       } 
       else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "X")) { 
        return possibleCombinations[n][1]; 
        break; 
       } 
       else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "X")) { 
        return possibleCombinations[n][0]; 
        break; 
       } 

      } 

      //======= 
      //If it cannot Win or Block, the compter chooses a random spot on the board to place a insertMarker on. 

      //An empty array to contain all the avaliable spots on the board 
      avaliableSpots = []; 

      //The for loop adds all the avaliable spots from the board into the array 

      for (var i = 1; i <= 9; i++) { 
       var spot = "spot" + i; 
       if (document.getElementById(spot).innerHTML == "") { 
        avaliableSpots.push(i); 
       } 
      } 

      //A random number is generated and it is used to find a spot on the board from the avaliable spots contained in the array 
      var randomSpot = Math.floor((Math.random() * (avaliableSpots.length))); 
      return avaliableSpots[randomSpot]; 
     } 

     //this function places the marker of the player and the computer on the board 
     function insertMarker(insertMarker, spot) { 

      if (won == false) { 

       if (document.getElementById("spot" + spot).innerHTML == "") { 

        if (insertMarker == "X" && computerTurn == false) { 

         document.getElementById("spot" + spot).innerHTML = insertMarker; 
         footer.innerHTML = "Computer's turn"; 
         turn = "Computer's "; 
         computerTurn = true; 

         //Sets a delay of 1 second before the computer places its marker 
         setTimeout(function(){ 
          insertMarker("O", findLocation()); 
          }, 1000); 

        } else if (insertMarker == "O") { 

         document.getElementById("spot" + spot).innerHTML = insertMarker; 
         computerTurn = false; 
         footer.innerHTML = "Your turn"; 
         humanturn(); 

        } 

        winner(); 
       } 

      } 

     } 

     //Function for the human player's turn. When the player selects a spot on the board, the insertMarker function is called, with the parameters X and the number of the spot. 
     function humanturn() { 
      //when the human player clicks on an empty spot, the insertMarker function is called with the parameters "x" and the number of the box 
      document.getElementById("spot1").onclick = function() {insertMarker("X", 1)}; 
      document.getElementById("spot2").onclick = function() {insertMarker("X", 2)}; 
      document.getElementById("spot3").onclick = function() {insertMarker("X", 3)}; 
      document.getElementById("spot4").onclick = function() {insertMarker("X", 4)}; 
      document.getElementById("spot5").onclick = function() {insertMarker("X", 5)}; 
      document.getElementById("spot6").onclick = function() {insertMarker("X", 6)}; 
      document.getElementById("spot7").onclick = function() {insertMarker("X", 7)}; 
      document.getElementById("spot8").onclick = function() {insertMarker("X", 8)}; 
      document.getElementById("spot9").onclick = function() {insertMarker("X", 9)}; 
     } 

     //This functions checks if there is a winner 
     function winner() { 

      for (var i = 0; i < 8; i++) { 

       if ((document.getElementById("spot" + possibleCombinations[i][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[i][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[i][2]).innerHTML == "O")) { 
        footer.innerHTML = "COMPUTER WINS"; 
        footer.style.color = "red"; 
        document.getElementById("spot" + possibleCombinations[i][0]).style.backgroundColor = "yellow"; 
        document.getElementById("spot" + possibleCombinations[i][1]).style.backgroundColor = "yellow"; 
        document.getElementById("spot" + possibleCombinations[i][2]).style.backgroundColor = "yellow"; 
        won = true; 
        break; 
       } 

       else if ((document.getElementById("spot" + possibleCombinations[i][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[i][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[i][2]).innerHTML == "X")) { 
        footer.innerHTML = "PLAYER WINS"; 
        footer.style.color = "red"; 
        document.getElementById("spot" + possibleCombinations[i][0]).style.backgroundColor = "yellow"; 
        document.getElementById("spot" + possibleCombinations[i][1]).style.backgroundColor = "yellow"; 
        document.getElementById("spot" + possibleCombinations[i][2]).style.backgroundColor = "yellow"; 
        won = true; 
        break; 

       } 

      } 

     } 

     //If it is the computer's turn, the computer places a insertMarker using the insertMarker function 
     if (turn == "Computer's ") { 
      document.getElementById("footer").innerHTML = "Computer's turn"; 
      insertMarker("O", findLocation()); 
      turn = "Your "; 
     } 

     //If it is the human player's turn, the player places a insertMarker using the insertMarker function 
     else if (turn == "Your ") { 
      document.getElementById("footer").innerHTML = "Your turn"; 
      humanturn(); 
      turn = "Computer's "; 
     } 
    </script> 
</body> 

Любая помощь будет оценена.

+1

Любой код будет очень благодарен – Justinas

+1

Не совсем * любой * код, но правильный минимальный тестируемый код, с помощью которого мы можем воспроизвести проблему ^^ –

+0

Входит в код. – Sachin

ответ

0

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

EDIT: должен был указать, какой метод. это 'insertMarker'

+0

Спасибо за помощь. Вы исправили мою проблему. – Sachin

+0

Он говорит, подождите 2 минуты, чтобы принять ответ – Sachin

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