Need Help With If / Else Statement on Tic-Tac-Toe Game

Code Feedback
1

This is my first time posting in the forums and asking for any kind of help, so sorry if I’m doing anything wrong here.

As the title states, I’m a bit hung up on the Tic-Tac-Toe game. In particular, I’m trying to get a certain outcome to trigger but it isn’t doing so and I’m not quite sure why. Here is the pen: https://codepen.io/sygilmore89/pen/BREvqG

A few things about the pen first…I haven’t asked for any help at all so it’s possible I could have some very obvious, newbie mistakes. I can’t run from criticism forever, so feel free to point out anything that needs to be addressed. For the exact reason I’m posting, it’s the final if / else statement. It may not work to count for every permutation as that would get a bit long, but my first thought is that I would start the computer’s choice in the same spot and try to account for every possible move the human would make to counter.

On the first run through I’m already encountering a problem. My solution to account for the human losing the game and putting an X in the wrong spot is to make a counter that would account for how many clicks have taken place on the human’s part. On the if / else I can’t tell why it isn’t triggering the if statement as the bottom left square is empty to satisfy the “” portion and then I put a counter of what number the counter variable is up to and it equals three.

I’m just stumped by why it continues to overwrite the X that’s already in the bottom middle square with an O instead of putting the O in the bottom right square, always resulting in that exact sequence of clicks coming out to a draw. I can elaborate as needed if anything is unclear. Thanks so much to anyone that helps.

2

it seems to me that you may not be correctly chaining the if/else statements; i.e., you only have the one “else” statement at the end and that block of code only cares about the “if” block that directly precedes it.

So, this code:

if($("#bottomLeft").text("") && counter == 3)

will cause the bottomMid div to be populated with “O” when it’s not true – all the previous “if” statements are not relevant to the “else”.

You might be able to resolve this by setting all the “if” statements after the first one to be “else if”.

3

I believe you’re right. I did change all the others to else ifs and it didn’t do quite what I was hoping. In fact it stopped some of the other clicks from triggering prior to getting to that step, but that’s probably just a reflection of the fact I’m trying to go about the solution in an illogical way. The code is getting pretty long and convoluted over the first sign of conflict, so I’ll just have to think about another way to handle it. Trying to string together so many if statements is a bit tricky, for sure.

Thanks for your help.