TicTacToe checkwin if 语句即使满足条件也不会通过

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();

您也许可以使用此 link https://codepen.io/mark3334/pen/WNjXoOL?editors=0011 访问笔。我不明白为什么检查获胜功能不起作用。单击 table 后，脚本会在内部文本上执行 console.log 并且全部显示为“X”，但 if 语句未通过。同样对于事件侦听器，我不明白为什么没有括号我听说对于你不应该的事件以及与调用函数和引用对象有关的事情，但我真的不明白。

Answer 1

我看到两个基本问题：

您的内部循环正在重用 i，这将阻止外部循环运行通过 i.
的所有所需值
你的比较是错误的，例如：

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

计算结果为：

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

第一个表达式 (cells[i].innerText == cells[5].innerText) 的计算结果为布尔值（真或假），然后将其与字符串 (cells[i+6].innerText) 进行比较，这会给出错误的结果。

相反，要比较多个值，您必须创建多个比较并将它们与 &&（逻辑“与”）连接起来：

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

您需要对所有三个比较进行此更改。

TicTacToe checkwin if 语句即使满足条件也不会通过

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

html

javascript

css

tic-tac-toe

codepen