After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScript. Please excuse any mistakes as I am still learning.
const playerTurn = document.querySelector('.turn');
let gameActive = true;
let currentPlayer = "X";
let gameArray = ["", "", "", "", "", "", "", "", ""];
const winMessage = () => `Player ${currentPlayer} wins!`;
const drawMessage = () => `It's a Draw!`;
const currentPlayerTurn = () => `Player ${currentPlayer}'s Turn`;
playerTurn.innerHTML = currentPlayerTurn();
function handleCellPlayed() {
gameArray[clickedCellIndex] = currentPlayer;
clickedCell.innerHTML = currentPlayer;
}
function handlePlayerChange() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
gameArray.innerHTML = currentPlayerTurn();
}
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function handleResultValidation() {
let roundWon = false;
for (let i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
let a = gameArray[winCondition[0]];
let b = gameArray[winCondition[1]];
let c = gameArray[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break
}
}
if (roundWon) {
playerTurn.innerHTML = winMessage();
gameActive = false;
return;
}
let roundDraw = !gameArray.includes("");
if (roundDraw) {
playerTurn.innerHTML = drawMessage();
gameActive = false;
return;
}
handlePlayerChange();
}
function handleCellClick() {
const clickedCell = clickedCellEvent.target;
const clickedCellIndex = parseInt(
clickedCell.getAttribute('data-cell-index')
);
if (gameArray[clickedCellIndex] !== "" || !gameActive) {
return;
}
handleCellPlayed(clickedCell, clickedCellIndex);
handleResultValidation();
}
function handleRestartGame() {
gameActive = true;
currentPlayer = "X";
gameArray = ["", "", "", "", "", "", "", "", ""];
playerTurn.innerHTML = currentPlayerTurn();
document.querySelectorAll('.cell')
.forEach(cell => cell.innerHTML = "");
}
document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));
document.querySelector('.restart').addEventListener('click', handleRestartGame);body {
font-family: "Courier", sans-serif;
text-align: center;
}
.game {
display: grid;
grid-template-columns: repeat(3, auto);
width: 304px;
margin: 50px auto;
}
.cell {
font-family: "Permanent Marker", cursive;
width: 100px;
height: 100px;
box-shadow: 0 0 0 1px #333333;
border: 1px solid #333333;
cursor: pointer;
line-height: 100px;
font-size: 60px;
}<h1 class="title">Tic Tac Toe</h1>
<div class="game">
<div data-cell-index="0" class="cell"></div>
<div data-cell-index="1" class="cell"></div>
<div data-cell-index="2" class="cell"></div>
<div data-cell-index="3" class="cell"></div>
<div data-cell-index="4" class="cell"></div>
<div data-cell-index="5" class="cell"></div>
<div data-cell-index="6" class="cell"></div>
<div data-cell-index="7" class="cell"></div>
<div data-cell-index="8" class="cell"></div>
</div>
<h2 class="turn"></h2>
<button class="restart">Restart</button>With some modifications to my JavaScript code, I was able to make the restart button appear after a few tweaks.