TicTacToe checkwin if statement does not go through even when conditions are met

Question

<h1>TicTacToe!</h1>
<table>
    <tr>
        <td class="cell left"id="0"></td>
        <td class="cell "id="1"></td>
        <td class="cell"id="2"></td>
    </tr>
    <tr>
        <td class="cell left"id="3"></td>
        <td class="cell"id="4"></td>
        <td class="cell"id="5"></td>
    </tr>
    <tr>
        <td class="cell left"id="6"></td>
        <td class="cell"id="7"> </td>
        <td class="cell"id="8"></td>
    </tr>
</table>



body {
      font-family: system-ui;
      background: #ffffff;
      color: black;
      text-align: center;
    }
td {
  border: 2px solid black;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
table {
   margin-left: auto;
   margin-right: auto;
   border-collapse: collapse;
  font-size: 20px;
  
}

table tr:first-child td {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child {
    border-left: 0;
}
table tr td:last-child {
    border-right: 0;
}
td:hover{background-color: #99e6ff ;opacity: 0.3;}



cells = document.querySelectorAll('.cell');
player = "X";
ai = "O";
function startgame(){
  console.log(cells[2].innerText);
  for (var i = 0; i < 9; i++){
    cells[i].innerText = "";      
    cells[i].addEventListener("click",add_text);
  }
}
function add_text(cell){
  document.getElementById(cell.target.id).innerText = player;
  if(checkwin()){
    console.log("Game over");
  }
}
function checkwin(){
  for(var i = 0; i < 7; i+=3){
    console.log("i",cells[i].innerText);
    console.log("i 1 ",cells[i+1].innerText);
    console.log("i 2",cells[i+2].innerText);
    console.log(player);
    if(cells[i].innerText == cells[i+1].innerText == cells[i+2].innerText == player){
      console.log("S");
      return True;
     }
   for(i = 0; i < 3; i++){
     if(cells[i].innerText == cells[i+3].innerText == cells[i+6].innerText == player){
       console.log("S");
       return True;
     }
   }
    for(i = 0; i < 3; i+=2) {
      if(cells[i].innerText == cells[5].innerText == cells[i+6].innerText == player){
        console.log("S");
        return True;
      }
    }
   
    
}
}

startgame();

You might be able to access the pen with this link https://codepen.io/mark3334/pen/WNjXoOL?editors=0011. I don't understand why the check win function doesn't work. After clicking on the table the script does console.log on the innertext and it all shows up as "X" yet the if statement doesn't go through. Also for the event listener I don't get why there's no brackets I heard that for events you're not supposed to and something to do with calling a function and referencing the object but I don't really get it.

Answer 1

I see two basic problems:

1. Your inner loops are reusing i, which will prevent the outer loop from running through all desired values of i.

2. Your comparisons are wrong, e.g.:

if(cells[i].innerText == cells[5].innerText == cells[i+6].innerText == player){

This evaluates to:

if(((cells[i].innerText == cells[5].innerText) == cells[i+6].innerText ) == player){

The first expression (cells[i].innerText == cells[5].innerText) evaluates to a Boolean (true or false), which is then compared to a string (cells[i+6].innerText), which gives you an erroneous result.

Instead, to compare multiple values you must create multiple comparisons and join them with && (logical "and"):

if(
  cells[i].innerText == cells[5].innerText
    &&
  cells[i].innerText == cells[i+6].innerText
    &&
  cells[i].innerText== player
){

You'll need to make this change to all three comparisons.