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>Estoy aprendiendo javascript y tratando de construir un juego de tres en raya. Quiero crear una condición if para elegir "x" u "o" después de otra, pero mi código probablemente no funcione. dentro de la segunda línea de declaración if: cuando es (giro = "o"), solo muestra "o" cuando es (giro === o == "o"), solo muestra "x" ¿Cuál es el problema y cómo puedo? ¿arregla esto?
Está utilizando la función de flecha como segundo parámetro en el detector de eventos de clic. Las funciones de flecha solo pueden ejecutar una declaración si no especifica un cuerpo usando corchetes.
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} );