Help with tic tac toe

I’m working on the tic tac toe project and am encountering an issue which I haven’t been able to get through (no matter how much reading I’ve been doing on this forum). It doesn’t seem like it should be this much of an issue or I’m just fundamentally misunderstanding something. I’m doing my project first just by having the computer take the first available spot. Now for some reason I can’t figure out how make the spot (for the computer’s turn) filled out in the game board screen. I know that the spot the computer selects is being filled out (I tested it with an alert showing the board spots) but the game screen isn’t being updated. Here is a link to codepen (it may be easier to see in case I didn’t explain it that well). Any help is appreciated.

You have two extra issues that you will want to deal with first.

  1. In your external JS links, make sure the JQuery is before the JQuery UI. Currently, they are added in the wrong order. JQuery UI needs JQuery loaded first to work properly.

  2. You have a type in the following line:


It is supposed to be getElementById (lowercase d).

Even if you fix the above errors, if I play the game and pick “X” and then click any space on the board, the following if statement will never evaluate to true, because board[i] is a string.

if (typeof board[i]=='number' && board[i]!==User) {

See if you correct your logic/code and get the computer to display something. If you get stuck, let us know.

Thanks @RandellDawson I’m going to see if I can figure it out now. :slight_smile:

Hi @RandellDawson thanks for the initial response. So I am still not figuring this out. What I was trying to do was fill in the first empty square when it’s the computer’s square. I checked for the first empty square by identifying whether board[i] is a number…But I’m having trouble filling in the game board visible to the user…I tested it out with an alert and saw that my function is filling out the game board array so I know that part is working. I just can’t make the computer fill in the spot in the board displayed on the screen…Again, I must be fundamentally understanding something here but can’t seem to overcome this issue.

You have a couple issues. I recommend using console.log statements instead of the alerts, because then you can check the console (Ctrl+Shft+I in chrome) for the values displayed along with any errors that may result from your code.

Below is your Comp_Move function and if you click on any square except the upper left-hand corner, you will see an error in the console, which is a result of a typo in document.getElementByid. The lowercase i should be uppercase as in Id not id.

Fix that and you still have two other issues. First, is related to your placement of the break statement. Should it be inside your if statement block of code or outside (where it currently is) and why should it be in one of those places or the other? What do you think document.getElementById(board) does and why?

  function Comp_Move() {
    for (var i=0; i<board.length; i++) {
      if (typeof board[i]=='number') {

Hi @RandellDawson thanks again for trying to help me understand this. I put the break outside the if statement (but within the for statement) because I thought I needed to break the loop after the first empty square is filled in with the computer’s choice. Is this thinking not correct?

I was testing something trying to get the id of the square which the computer picked (should’ve been a document.getElementById(board[i]), but then I realized my logic was flawed because once I assigned the Computer choice (for example Comp= “X”) to that square, the value of board[i] is then “X” and not the previously assigned place holder number. This is the part I’m having trouble reconciling. How can I get the id of the square based on the game board if I’m changing that value from a number to the computer choice. I’m sorry if this is kind of convoluted logic…let me know if I’m not making sense. I appreciate you taking the time to help me with this! :slight_smile:

When you put the break statement outside the if block, it will break out of the for loop if the type of board[i] is a number or even if it is not.

EDIT: Go back to your original for loop solution and assign Comp to board[i] and then break. This will add the Comp value to the board array. Then, use document.getElementById(i).innerHTML = Comp to display the Comp value to the board.

      for (var i = 0; i < board.length; i++) {
        if (typeof board[i] =='number') {
          board[i]=Comp; // i has first position on the board that is a number
          document.getElementById(i).innerHTML = Comp; // sets html of the the square element with id=i to the Comp value

I edited my previous response to you. Please take a look.

Thank @RandellDawson, I was trying to figure it out last night without the for loop but eventually decided to keep going with it but didn’t get anywhere…Thanks so much for showing me how to fill in the board with the computer’s choice! Now, I can finally test for the winning combos and finish this game…