Looking for help with Tic Tac Toe function: Check the winner?

1

Can anyone point me in the right direction why my checkForWin function isn’t working? I use console.log(); to make sure the player or computer is being passed to it and it is. Any help is appreciated. Thank you inadvance.

$(document).ready(function() {

  var firstTurn = true;
  var secondTurn = false;
  var player;
  var cpu;
  var turns = ["", "", "", "", "", "", "", "", ""];

  function playerTurn() {
    if (firstTurn === true) {
      $(".squares").on("click", function() {
    if (firstTurn === true) {
      $(this).html(player);         
      secondTurn = true;
      firstTurn = false;
      cpuTurn();
    }
   });
  }
}
function cpuTurn() {
  if (secondTurn === true) {
   $(".squares").on("click", function() {
     if (secondTurn === true) {
      $(this).html(cpu);         
      secondTurn = false;
      firstTurn = true;
      playerTurn();
    }
   });
  }
}
function checkForWin() {
   var currentPlayer;
 if (firstTurn === true) {
   currentPlayer = player;
 } else if (secondTurn === true) {
   currentPlayer = cpu;
 }
 console.log(currentPlayer);

switch (currentPlayer) {
  case $("0").html() === currentPlayer && $("1").html() === currentPlayer &&
  $("2").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("3").html() === currentPlayer && $("4").html() === currentPlayer &&
  $("5").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("6").html() === currentPlayer && $("7").html() === currentPlayer &&
  $("8").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("0").html() === currentPlayer && $("3").html() === currentPlayer &&
  $("6").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("1").html() === currentPlayer && $("4").html() === currentPlayer &&
  $("7").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("2").html() === currentPlayer && $("4").html() === currentPlayer &&
  $("8").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("0").html() === currentPlayer && $().html() === currentPlayer &&
  $("8").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  case $("2").html() === currentPlayer && $("4").html() === currentPlayer &&
  $("6").html() === currentPlayer:
    $("#message").text(currentPlayer + "wins");
    break;
  default:
}
}
$(".track").click(function() { 
   var squareId = $(this).attr("id");
    if (firstTurn === true) {
    turns[squareId] = player;
    checkForWin();
    console.log(turns);
   } else {
   turns[squareId] = cpu;
   checkForWin();
   console.log(turns);
 }
});

$("#xButton").on("click", function() {
  cpu = "O";
  player = "X";
  $("#oButton").hide();
  $(this).attr("disabled", true);
  playerTurn();
});

$("#oButton").on("click", function() {
  player = "O";
  cpu = "X";
  $("#xButton").hide();
  $(this).attr("disabled", true);
  playerTurn();
});

$("#reset").on("click", function() {
  $("#xButton").show();
  $("#oButton").show();
  $("#oButton").attr("disabled", false);
  $("#xButton").attr("disabled", false);
  $(".squares").html("");
  player;
  cpu;
  turns = ["", "", "", "", "", "", "", "", ""];
  firstTurn = true;
  secondTurn = false;
})

});
2

I’m not sure, but I don’t think that’s how switch statements work. I’m fairly confident that the switch statement only checks the value of the variable passed to it against the value you put there.

An easier solution is to have functions that checks the rows, columns and diagonals individually, and your win check function just checks those. Much easier to diagnose problems with that set-up.

3

+1. You need to correct the code for the switch case: https://www.w3schools.com/js/js_switch.asp. You can provide an expression in place of the variable currentPlayer in your switch. Alternatively, it looks like you’d be better off using if/else statements.