J'essaie d'implémenter les X et les O dans Tic Tac Toe via JavaScript en cliquant sur un carré de mon tableau. Je dois créer X ou O pour le jeu Tic Tac Toe. Mais je ne sais pas comment faire un X ou un O. Et j'ai besoin qu'il soit fonctionnel comme un véritable jeu de tic-tac-toe.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez parcourir chaque carré car querySelectorAll renvoie plusieurs nœuds et vous ne pouvez pas y ajouter directement d'écouteurs d'événements car addEventListener ne peut fonctionner que sur un nœud à la fois.
J'ai également ajouté du CSS à l'extrait de code ci-dessous afin que vous puissiez le voir fonctionner lorsque vous l'exécutez. Ignorez cela dans le projet final.
window.onload = () => { const squares = document.querySelectorAll(".square") let currentPlayer = "X"; squares.forEach(square => { square.addEventListener("click", () => { if (square.innerHTML === "") { square.innerHTML = currentPlayer; currentPlayer = currentPlayer === "X" ? "O" : "X"; } }); }); }; document.querySelector('#reset-btn').addEventListener('click', () => { document.querySelectorAll('.square').forEach(square => { square.innerHTML = ""; }); });#board { margin: 0 auto; width: 50%; } .row { display: grid; grid-template-columns: 1fr 1fr 1fr; } .square { border: 1px solid black; padding: 1rem; cursor: pointer; text-align: center; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } .square:hover { background-color: #CCCCCC; }Edit : j'ai modifié l'extrait de code ci-dessus enAlternate on click, qui peut être utilisé en initialisant une variable avec le joueur actuel (X ou O) et en l'échangeant au clic à l'aide d'une simple instruction ternaire. J'ai également ajouté une fonctionnalité à votre bouton de réinitialisation !