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

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>

I'm learning javascript and trying to build a tic-tac-toe game. I want to create an if condition to whether choose "x" or "o" after another, but my code doesn't work probably. inside second if statement line: when it's ( turn = "o" ), it only shows "o" when it's (turn === or == "o"), it only shows "x" What's the problem and how can I fix this?

Answer 1

You are using arrow function as second parameter in click event listener. Arrow functions can only run one statement if you don't specify a body using curly brackets.

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

Question

1 answers

solution1
0 ACCPTED 2022-02-01 17:58:03

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

Question

1 answers

solution1 0 ACCPTED 2022-02-01 17:58:03

solution1
0 ACCPTED 2022-02-01 17:58:03