Tic tac toe not working

I did a tic tac toe tutorial and for some reason it’s not marking anything on the board.

Here is the HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Justin's tictactoe</title>

  <link rel="stylesheet" href="index.css">

</head>

<body>

  <section>

    <h1 class="game--title">Tic Tac Toe</h1>

    

<div class="game--container">

    <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 ="game--status"></h2>

    <button class="game--restart">Restart Game</button>

  </section>

  <script src="index.js"></script>

</body>

</html>

Here’s the CSS

body {

    font-family: "Arial", sans-serif;

}

section {

    text-align: center;

}

.game--container {

    display: grid;

    grid-template-columns: repeat(3, auto);

    width:306px;

    margin: 0 auto;

}

.cell {

    font-family: "Permanent Marker", cursive;

    width: 100px;

    height: 100px;

    box-shadow: 0 0 0 1px #333333;

    border: 1px solid #333333;

    cursor: crosshair;

    line-height: 100px;

    font-size: 60px;

}

And the JS

const statusDisplay = document.querySelector('.game--status');

let gameActive = true;

let currentPlayer = "X";

let gameState = ["", "", "", "", "", "", "", "", ""]

const winningMessage = () => `Player ${currentPlayer} has won!`

const drawMessage = () => `Game ended in a draw!`;

const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;

statusDisplay.innerHTML = currentPlayerTurn();

// THIS PORTION UPDATES OUR GAME STATE AND UPDATES THE USER INTERFACE

function handleCellPlayed(clickedCell, clickedCellIndex) {

    gameState[clickedCellIndex] = currentPlayer;

    clickedCell.innerHTML = currentPlayer;

}

// THIS ENDS THE PORTION THAT UPDATES GAME STATE AND UI - This updated the game state to reflect the played move as well as updated the UI to reflect the played move. This accepts the clicked cell -the .target of the click event and the index of the cell that has been clicked.

function handlePlayerChange() {

currentPlayer = currentPlayer === "X" ? "O" : "X";

statusDisplay.innerHTML = currentPlayerTurn();

}

//THIS VALIDATES RESULTS - THIS WILL CHECK IS THE GAME ENDED IN A WIN, DRAW, OR IF THERE ARE STILL MOVES LEFT TO PLAY - THE ARRAY IS ALL THE WINNING MOVES

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 = gameState[winCondition[0]];

        let b = gameState[winCondition[1]];

        let c = gameState[winCondition[2]];

        if (a === '' || b === '' || c === '') {

            continue;

        }

    if (a === b && b === c) {

        roundWon = true;

        break

      }

    }

if (roundWon) {

    statusDisplay.innerHTML = winningMessage();

    gameActive = false;

    return;

}

// Values in the arrays are indexes for cells that need to be filled by the same player to win the game. The for-loop will go through each one and check if the elements from the game state array - the one with the empty strings - "" "" "" "" "" "" under those indexes match. If they match a winner is declared and the game ends.

//This part checks for a draw

let roundDraw = !gameState.includes("");

if (roundDraw) {

    statusDisplay.innerHTML = drawMessage();

    gameActive = false;

    return;

}

handlePlayerChange();

}

// The return statement in the roundWon check it is known that if a player has won that round - if so the script will stop there. This prevented using ELSE conditions to compact code.

// THIS PART BEGINS CHECKING IF CELL WAS CLICKED

function handleCellClick(clickedCellEvent) {

    const clickedCell = clickedCellEvent.target;

    const clickedCellIndex = parseInt(

        clickedCell.getAttribute('data-cell-idex')

    );

    if (gameState[clickedCellIndex] !== "" || !gameActive) {

        return;

    }

    handleCellPlayed(clickedCell, clickedCellIndex);

    handleResultValidation();

}

// THIS PART ENDS CHECKING IF CELL WAS CLICKED - THIS ACCEPTS THE CLICK EVENT - THIS TRACKS WHICH CELL WAS CLICKED AND GET'S IT'S INDEX

function handleRestartGame() {

    gameActive = true;

    currentPlayer = "X";

    gameState = ["", "", "", "", "", "", "", "", ""];

    statusDisplay.innerHTML = currentPlayerTurn();

    document.querySelectorAll('.cell')

    .forEach(cell => cell.innerHTML = "");

}

document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));

document.querySelector('.game--restart').addEventListener('click', handleRestartGame);

That was ugly. Here is a new link - hopefully this works better

So I’m not sure how to post a link here.

Heya~!

You should be able to paste the full URL directly into the editor.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).


I’ve also added a character in front of your repl link, so to avoid the embed forming

oof, thanks for the tip! Makes things way more readable!

Just bumping to see if anyone knows what’s going on with my tic tac toe.

Thanks again so much guys!

just bumping again it looks like I fell off the first page