I'm building a simple tic-tac-toe game and I need some help with my reset button and winner function.
At the end of provided snippet I'm trying to implement a reset button, but I'm not exactly sure how to get it to work. The way I'm doing my else statement for my winner function is so, that if there are no more moves, I can't seem to get it to say: "no more moves" without it saying it every time you click on a square.
How can I implement this?
// IIFE
(function() {
angular
.module("myApp", [])
.controller("tictactoeController", tictactoeController);
// Controller
function tictactoeController() {
// Capture Variable
var self = this;
self.currentTurn = '';
self.playerOne = 'X';
self.playerTwo = 'O';
self.winner = '';
// Gameboard
self.boxes = [
{square: 1}, {square: 2}, {square: 3},
{square: 4}, {square: 5}, {square: 6},
{square: 7}, {square: 8}, {square: 9} ];
// Picks Random Player To Be X or O
self.random = function() {
if (Math.random() > 0.5) {
alert("Player One GO!");
self.currentTurn = "X";
} else {
alert("Player Two GO!");
self.currentTurn = "O";
}
};
self.random();
// Clickbox Function
self.clickbox = function($index) {
//console.log(self.boxes[$index].value + "check");
if (self.boxes[$index].value === undefined) {
self.boxes[$index].value = self.currentTurn;
self.boxes[$index].square = self.currentTurn;
if (self.currentTurn === "X") {
self.currentTurn = "O";
} else {
self.currentTurn = "X";
}
} else {
alert(
"Already Taken! Choose Another Square!"
);
}
// Check for winner after each click
self.winner(self.boxes[$index].value);
};
// Winner Fucntion
self.winner = function(input) {
// Row Wins
if ((self.boxes[0].square == input && self.boxes[
1].square == input && self.boxes[2]
.square == input) || (self.boxes[3].square ==
input && self.boxes[4].square == input &&
self.boxes[5].square == input) || (self
.boxes[6].square == input && self.boxes[
7].square == input && self.boxes[8]
.square == input)) {
alert(input + " WINS!");
// Column Wins
} else if ((self.boxes[0].square == input &&
self.boxes[3].square == input && self.boxes[
6].square == input) || (self.boxes[
1].square == input && self.boxes[4]
.square == input && self.boxes[7].square ==
input) || (self.boxes[2].square ==
input && self.boxes[5].square == input &&
self.boxes[8].square == input)) {
alert(input + " WINS!");
// Diagonal Wins
} else if ((self.boxes[0].square == input &&
self.boxes[4].square == input && self.boxes[
8].square == input) || (self.boxes[
2].square == input && self.boxes[4]
.square == input && self.boxes[6].square ==
input)) {
alert(input + " WINS!");
// No Winner
}
};
// Reset Game Button
self.resetbtn = function() {
};
}
})();
The reset function:
self.resetbtn = function() {
self.boxes.forEach(function(box, index) {
self.boxes[index].value = '';
self.boxes[index].square = index;
})
};
The no more moves else:
var hasMoves = false;
self.boxes.forEach(function(box, index) {
if(box.square != self.playerOne && box.square != self.playerTwo) {
hasMoves = true;
}
}
if(! hasMoves) {
alert ("No more moves!");
}
Also, it would be better if in the code you don't use hard coded values X and O but their variables self.playerOne and self.playerTwo. It will make it easier to change the values X and O (though in a Tic Tac Toe game you wouldn't do it).
Related
I'm not able to return the winner and stop the prompt from asking the input.
const prompt = require('prompt-sync')({ sigint: true });
const ticTacToe = {
board: new Array(9).fill(null),
person: '',
winner: '',
randomPlayer: function () {
let number = Math.floor(Math.random() * 2);
if (number === 0) {
return this.person = 'X';
}
else {
return this.person = 'O';
}
},
start: function () {
let firstPlayer = this.person;
let count = 1;
let winner = '';
while (count <= 9) {
let input;
if (count === 1) {
input = Number(prompt(firstPlayer + ":"));
count += 1;
this.moves(input);
}
else {
this.person = this.nextPlayer();
input = Number(prompt(this.person + ":"));
count = count + 1;
this.moves(input);
this.winner = this.computerWinner(this.person);
if (this.winner !== null) {
console.log("Winner is : " + this.winner);
return this.winner;
}
}
}
},
nextPlayer: function () {
if (this.person === 'X') {
return this.person = 'O';
}
else {
return this.person = 'X';
}
},
moves: function (number) {
for (let i = 0; i < this.board.length; i++) {
this.board[number - 1] = this.person;
}
},
computerWinner: function (player) {
// check horizontal win
for (var i = 0; i <= 2; i++) {
if (this.board[i][0] === player &&
this.board[i][1] === player &&
this.board[i][2] === player) {
return player;
}
else {
return null;
}
}
// check vertical win
for (var i = 0; i <= 2; i++) {
if (this.board[0][i] === player &&
this.board[1][i] === player &&
this.board[2][i] === player) {
return player;
}
else {
return null;
}
}
// check diagonal win
if ((this.board[0][0] === player &&
this.board[1][1] === player &&
this.board[2][2] === player) ||
this.board[0][2] === player &&
this.board[1][1] === player &&
this.board[2][0] === player) {
return player;
}
else {
return null;
}
}
}
console.log(ticTacToe.randomPlayer());
console.log(ticTacToe.start());
console.log(ticTacToe.board);
It should return a winner name when the rows or columns or diagonals become equal.
The prompt is keep on asking the input from the user even when the rows or columns or diagonals become equal. And it is not displaying the winner.
Please help
The output looks like below
O
O:1
X:2
O:4
X:3
O:7
X:5
O:6
X:8
O:9
undefined
[
'O', 'X', 'X',
'O', 'X', 'O',
'O', 'X', 'O'
]
There are some issues:
Don't return before having done all tests in computerWinner
Your board is a one-dimensional array, not 2-dimensional, so all the tests you do in computerWinner are wrong. Convert them to be using a 1-dimensional array
There is a useless loop in moves. There should be only one assignment there, without a loop
moves: function (number) {
this.board[number - 1] = this.person; // No loop here!
},
computerWinner: function (player) {
// Reference a 1-dimensional array!
for (var i = 0; i < 9; i += 3) {
if (this.board[i] === player &&
this.board[i+1] === player &&
this.board[i+2] === player) {
return player;
}
// Don't return here yet
}
for (var i = 0; i <= 2; i++) {
if (this.board[i] === player &&
this.board[i+3] === player &&
this.board[i+6] === player) {
return player;
}
}
if ((this.board[0] === player &&
this.board[4] === player &&
this.board[7] === player) ||
this.board[2] === player &&
this.board[4] === player &&
this.board[6] === player) {
return player;
}
// If execution gets here, there is no win.
// Just let the function return the default `undefined`
}
You misunderstood how return works. A return will exit the function it belongs to, and no further code is executed.
If player does not have every field in the first row, you call return null and that will exit the function. So no further tests are done. Neither for the remaining rows nor for the columns or diagonals. So you effectively only test the first row.
You have to remove all return null; and only place one return null; at the end of the function.
You should learn how to use a debugger, and step tough each line of the code to see what is actually happening.
I'm building a rock, paper, scissors game and working on excluding edge cases.
The function is setPlayerMoves(), which is supposed to set previously undefined global variables for player moves and give them a 'value' between 1-99. how do I excluded edge cases like wrong move type (eg. 'rok') or wrong value (eg. 100).
Here is my incorrect code:
function setPlayerMoves(player, moveOneType, moveOneValue, moveTwoType, moveTwoValue, moveThreeType, moveThreeValue) {
if (player === 'Player One' && (moveOneType && moveTwoType && moveThreeType === 'rock' || 'paper' || 'scissors') && (moveOneValue && moveTwoValue && moveThreeValue === (>= 1 && <= 99))) {
playerOneMoveOneType = 'rock';
playerOneMoveTwoType = 'paper';
playerOneMoveThreeType = 'scissors';
playerOneMoveOneValue = 11;
playerOneMoveTwoValue = 33;
playerOneMoveThreeValue = 55;
} else if (player === 'Player Two') {
playerTwoMoveOneType = 'rock';
playerTwoMoveTwoType = 'paper';
playerTwoMoveThreeType = 'scissors';
playerTwoMoveOneValue = 11;
playerTwoMoveTwoValue = 33;
playerTwoMoveThreeValue = 55;
}
}
Problem
Code for checking edge cases are wrong.
(player === 'Player One' && (moveOneType && moveTwoType && moveThreeType === 'rock' || 'paper' || 'scissors') && (moveOneValue && moveTwoValue && moveThreeValue === (>= 1 && <= 99)))
Also you are checking the edge cases for only 'player one'
Solution
Check the values seperately before assigning values and create a valid variable
let valid = false
let states = ['rock','paper','scissors'];
if((states.indexOf(moveOneType) != -1) && (states.indexOf(moveTwoType) != -1) && (states.indexOf(moveThreeType) != -1)){
// valid state
valid = true;
}else{
valid = false;
}
if((moveOneValue >=1 && moveOneValue <= 99) && (moveTwoValue >=1 && moveTwoValue <= 99) && (moveThreeValue >=1 && moveThreeValue <= 99)){
//valid value
valid = true;
}else{
valid = false
}
Then assign the values.
if ((player === 'Player One') && valid) {
playerOneMoveOneType = moveOneType;
playerOneMoveTwoType = moveTwoType;
playerOneMoveThreeType = moveThreeType;
playerOneMoveOneValue = moveOneValue;
playerOneMoveTwoValue = moveTwoValue;
playerOneMoveThreeValue = moveThreeValue;
} else if ((player === 'Player Two') && valid) {
playerTwoMoveOneType = moveOneType;
playerTwoMoveTwoType = moveTwoType;
playerTwoMoveThreeType = moveThreeType;
playerTwoMoveOneValue = moveOneValue;
playerTwoMoveTwoValue = moveTwoValue;
playerTwoMoveThreeValue = moveThreeValue;
}
Also if possible
Create an object each for player1 and player2 like below and use.
let player1 = {
moveOneType:'rock'
moveTwoType:'paper'
moveThreeType:'scissors'
moveOneValue: 23
moveTwoValue: 33
moveThreeValue: 98
}
I'm working on minimax part of a tic tac toe game, and I keep getting "max call stack size exceeded" error. I isolated the bug to line # 110 which is emptyIndexies(board) function. But I don't see anything wrong with the function. I tested it on the console, and the board seems to update when I click on it; however, the computer turn don't work. Here's the code
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var player, sqrId, user, computer, row, col;
const ARR_LENGTH = 9;
$(document).ready(function() {
//1 checkbox event listener
$(".checkBox").click(function() {
if($(this).is(":checked")) {
user = $(this).val();
player = user;
computer = (user == 'X') ? 'O' : 'X';
}
});
//2 square even listener
$(".square").click(function() {
sqrId = $(this).attr("id");
playerMove();
minimax(board);
if(checkWinner(board, turn)) {
alert(turn+" Wins the game!");
resetBoard();
}
if(!checkDraw()) {
alert("It's a draw!");
}
player = (player == user) ? computer : user;
});
//reset board
$(".reset").click(function() {
resetBoard();
})
});
//player move
function playerMove() {
if($("#"+sqrId).text() == "") {
$("#"+sqrId).text(player);
board[sqrId] = player;
console.log(board);
}
else {
alert("Wrong move");
}
}
/* computer AI generate random number between 0 - 8 */
function computerAI() {
var random;
var min = 0, max = 8;
do {
random = Math.floor(Math.random() * (max + min));
}while($("#"+random).text() != "")
$("#"+random).text(computer);
row = getRow();
col = getCol();
board[row][col] = computer;
}
//getting row number
function getRow() {
return Math.floor(sqrId / ARR_LENGTH);
}
//getting col number
function getCol() {
return sqrId % ARR_LENGTH;
}
/* checking for winner */
// winning combinations using the board indexies
function winning(board){
if (
(board[0] == player && board[1] == player && board[2] == player) ||
(board[3] == player && board[4] == player && board[5] == player) ||
(board[6] == player && board[7] == player && board[8] == player) ||
(board[0] == player && board[3] == player && board[6] == player) ||
(board[1] == player && board[4] == player && board[7] == player) ||
(board[2] == player && board[5] == player && board[8] == player) ||
(board[0] == player && board[4] == player && board[8] == player) ||
(board[2] == player && board[4] == player && board[6] == player)
) {
return true;
} else {
return false;
}
}
function resetBoard() {
$(".square").text("");
$(".checkBox").prop("checked", false);
user = "";
turn = "";
computer = "";
for(var i = 0; i < ARR_LENGTH; i++) {
board[i] = "";
}
}
// returns list of the indexes of empty spots on the board
function emptyIndexies(board){
return board.filter(s => s != "O" && s != "X");
}
// the main minimax function
function minimax(newBoard, player){
//available spots
var availSpots = emptyIndexies(newBoard);
// checks for the terminal states such as win, lose, and tie
//and returning a value accordingly
if (winning(newBoard, user)){
return {score:-10};
}
else if (winning(newBoard, computer)){
return {score:10};
}
else if (availSpots.length === 0){
return {score:0};
}
// an array to collect all the objects
var moves = [];
// loop through available spots
for (var i = 0; i < availSpots.length; i++){
//create an object for each and store the index of that spot
var move = {};
move.index = newBoard[availSpots[i]];
// set the empty spot to the current player
newBoard[availSpots[i]] = player;
/*collect the score resulted from calling minimax
on the opponent of the current player*/
if (player == computer){
var result = minimax(newBoard, user);
move.score = result.score;
}
else{
var result = minimax(newBoard, computer);
move.score = result.score;
}
// reset the spot to empty
newBoard[availSpots[i]] = move.index;
// push the object to the array
moves.push(move);
}
// if it is the computer's turn loop over the moves and choose the move with the highest score
var bestMove;
if(player === computer){
var bestScore = -10000;
for(var i = 0; i < moves.length; i++){
if(moves[i].score > bestScore){
bestScore = moves[i].score;
bestMove = i;
}
}
}else{
// else loop over the moves and choose the move with the lowest score
var bestScore = 10000;
for(var i = 0; i < moves.length; i++){
if(moves[i].score < bestScore){
bestScore = moves[i].score;
bestMove = i;
}
}
}
// return the chosen move (object) from the moves array
return moves[bestMove];
}
I'm making a pomodoro clock with a break timer and a session timer. I'm using a single numpad to input the data into each clock by trying to nest the o'clock event to set each clock. To make it happen you click the display for the clock and then start inputting the buttons. There is 0-9 a delete button and an enter button. I haven't been able to get it to even display anything for either function. So I'm starting to wonder if what I'm trying to do would even work? Just looking for whether you can nest on click events and if so what I'm doing wrong. Or another method for what I'm looking to do. Made a fiddle to view it minimize the js and css windows. https://jsfiddle.net/zackluckyf/jhe98j05/1/
$(".session-time-clock").click(function(){
// changes the color to make it flash, add a duration and then change it back
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
sessionTimeClock = "00:00";
counter = 4;
/*
Will this work?
*/
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
sessionTimeClock = "00:" + input + sessionTimeClock.slice(4);
}
if(counter === 1)
{
sessionTimeClock = "0" + input + sessionTimeClock.slice(2);
}
if(counter === 0)
{
sessionTimeClock = input + sessionTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
sessionTimeClock = "00:0" + sessionTimeClock.slice(4);
}
else if(counter === 1)
{
sessionTimeClock = "00:" + sessionTimeClock.slice(3);
}
else if(counter === 0)
{
sessionTimeClock = "0" + sessionTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".session-time-clock").text("hello");
});
});
$(".break-time-clock").click(function(){
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
breakTimeClock = "00:00";
counter = 4;
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
breakTimeClock = breakTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
breakTimeClock = "00:" + input + breakTimeClock.slice(4);
}
if(counter === 1)
{
breakTimeClock = "0" + input + breakTimeClock.slice(2);
}
if(counter === 0)
{
breakTimeClock = input + breakTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
breakTimeClock = "00:0" + breakTimeClock.slice(4);
}
else if(counter === 1)
{
breakTimeClock = "00:" + breakTimeClock.slice(3);
}
else if(counter === 0)
{
breakTimeClock = "0" + breakTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".break-time-clock").text(breakTimeClock);
});
});
The supplied code is not identical to the jsfiddle. I will relate to the jsfiddle:
You have this code:
$("button").click(function(){
if(input === "Start")
{
// start clock code
}
else if(input === "Pause")
{
// pause clock code
}
else if(input === "Reset")
{
sessionTimeClock = "00:00";
breakTimeClock = "00:00";
}
return true;
});
This is the first time you assign a click handler to "button" and therefore it gets called first.
The "input" variable is not defined, and therefore the other handlers are not called. (You can see an error in the Dev Tools console).
Im having some trouble with a javascript code for a tic tac toe webpage. Whenever I make a move this error occurs in the console:
Uncaught TypeError: string is not a function
Here is my webpage's link :
http://www.cgscomputing.com/36558/test.html
And here is the code:
<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>
Any help will be much appreciated.
You've called the method the same name as a parameter, so when you make the recursive call you're calling the parameter which is either "O" or "X" - not the function. Rename one of them and it should resolve this problem
EDIT: should have said which method. it's 'insertMarker'