Tic Tac Toe - Checking Win Condition

Tic Tac Toe - Checking Win Condition
0

#1

Hey folks,
I would greatly appreciate if someone could point out my stupidity here.
The code to check a win condition seems to run fine in repl.it but not in codepen.

repl.it
codepen

If you check the console, it seems like the temp variable doesn’t populate in the function and I’m unable to understand why. I am sure I’m missing something.

Thanks in advance!


#2

Hi @hxii

This is a perfect opportunity for you to learn how to debug a program.
Place the debugger statement before console.log("Loop " + i);
It should look like this:

 function checkOwin() { // Check if O wins
  console.log("Starting..");
  for (i=0; i<winningConditions.length; i++) {
    console.log("Loop " + i);
    debugger;
    var temp = winningConditions[i].filter(function(n) {
      return oChecks.indexOf(n) !== -1;
    })
    console.log("TEMP " + temp)
    if (temp.length >= 3) {
      console.log("WIN! " + winningConditions[i])
      break;
    }
  }

Then open the chrome dev tools and start playing.

Here are some helpful resources about debugging.

If you still won’t be able to figure out what’s broken after 15 mins, ping me and I’ll tell you.
It’s a simple mistake so I think you can do it on your own. GL & HF.


#3

Thanks @marzelin!
Teach a man to fish, huh? :smiley:

I’ll admit it took me more than 15 minutes, but I finally figured it out: n.toString().
winningConditions contains numbers, while oChecks contains strings.


#4

I’d just like to add, in case someone stumbles across this searching for a similar problem:

The reason n.tostring() solves the problem is because the numbers I am pushing to the arrays are taken from the ID of the clicked element (id="1"), so they’re in fact strings, while the numbers in winningConditions are numbers.