如果条件不起作用，我的井字游戏

Question

let cells = document.querySelectorAll(".cell");

let turn = "x";

cells.forEach( box => {
    box.addEventListener("click",
     () => box.classList.add("fill-" + turn));   

     if ( turn === "x" ) turn = "o";
     else turn = "x";
     
},
 { once: true}
);

#board{
  border: 2px solid red;
  width: 210px;
  height: 210px;
  margin: auto;
  
  
}

.cell{
  border: 1px solid red;
  display: block;
  background-color: rgb(241, 239, 239);
  text-decoration: none;
  width: 68px;
  height: 68px;
  float: left;
  cursor: pointer;
  font-size: 60px;
  text-align: center;
  line-height: 60px;
}

.cell:hover{
  background-color: rgb(207, 207, 207);

}

.cell.fill-x::after{
  content: "x";
  color: blue;
}

.cell.fill-o::after{
  content: "0";
  color: red;
}

<!Doctype html>
<html>
 <head>
  <title>Dooz</title>
  <meta charset="UFT-8">
  <link rel="stylesheet" href="dooz.css">
 
 </head>
 <body>
  
   <div id="board">
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
    <a  class="cell"></a>
   </div>

   <script src="dooz.js"></script>
 </body>
</html>

我正在学习 javascript 并尝试制作一款井字游戏。我想创建一个 if 条件来决定是依次选择“x”还是“o”，但我的代码可能不起作用。在第二个 if 语句行内：当它 (turn = "o") 时，它只显示 "o" 当它（转===或==“o”）时，它只显示“x” 有什么问题，我该如何解决？

Answer 1

您正在使用箭头函数作为点击事件侦听器中的第二个参数。如果不使用大括号指定函数体，箭头函数只能运行一条语句。

let cells = document.querySelectorAll(".cell");

let turn = "x";

cells.forEach( box => {
    box.addEventListener("click",
     () => {
       box.classList.add("fill-" + turn));   

       if ( turn === "x" ) turn = "o";
       else turn = "x";
     });
},
 { once: true}
);

如果条件不起作用，我的井字游戏

my tic-tac-toe game if condition doesn't work

javascript

if-statement

tic-tac-toe