Sometimes trying to make someone else’s code work work with your logic is like trying to fit a square peg into a hole. They are not compatible.
Your code is very difficult to follow. It is not organized (i.e functions at top of local scope and main code at bottom). Also, you have so much duplicate code. The code for the ‘X’ button click vs the ‘O’ button click is only about 1% different. You should create a function for this and figure out a way to handle the small differences. Your code appears as if you did not have a clear algorithm for certain sections before you started writing code.
I am just going to focus on if I am player ‘X’, because what I say should also apply to if I was player ‘O’/ Also, I am just going to explain how you can modify your code to have the computer make a mark on the board. I personally would recommend starting over with a well thought out algorithm for each piece of your game, but that will be up to you.
After I click a square which gets filled with an ‘X’ using $(this).html(“X”); your code checks if the game is won. If not, your computerTurn executes. computerTurn is where you should make the “O” mark. Instead of a $(this) like you had for the player to know which square to mark, you have compRow and compCol which represent the position a square on the board. But wait a second, will compRow and compCol actually give us good values to use? Let’s look at your computerTurn function closely. I assume you are wanting a random number either 0, 1, or 2 to be assigned to compRow and compCol with your code, but that is NOT what will happen. I suggest you review one of the earlier FCC challenge on creating random whole number to get only values of 0, 1, or 2.
function computerTurn() {
console.log('computerTurn')
var compRow = (Math.random() * 3).toFixed();
var compCol = (Math.random() * 3).toFixed();
if (grid[compRow][compCol] === 0) {
grid[compRow][compCol] = 2;
}
console.log(grid);
}
Let’s assume you figure out how to get the correct random numbers for compRow and compCol and we get to your if statement which checks if a square has a 0 in it which means the space is available for a mark by the computer. If it is available, then you assign 2 to the 2-dimensional array grid using the compRow and compCol as indices. This is fine, but what if compRow and compRow end up being a square that is already occupied by either the player (1) or the computer (2)? You have no logic to handle getting another available square. You need to develop an algorithm around how you would do this.
Let’s assume you figured out how to get a compRow and a compCol which is definitely an available square for the computer to play. Now, we can make use of the jQuery eq function to select the correct row and col of the available square an put a ‘O’ in it.
$('#gameBoard .row:eq('+compRow+') .col:eq('+ compCol+')').html('O');
