I'm encountering an issue with my code where the tiles are not clickable and nothing is being displayed. I suspect that the problem lies in this section: tiles.forEach( (tile, index) => { tile.addEventListener('click', () => userAction(tile, index)); });. Could it be a connectivity problem with the scripts? Can someone pinpoint the error?

window.addEventListener('DOMContentLoaded', () => {
     const tiles = Array.from(document.querySelectorAll('.tile'));
     const playerDisplay = document.querySelector('.display-player');
     const resetButton = document.querySelector('#reset');
     const announcer = document.querySelector('.announcer');

     let board = ['', '', '', '', '', '', '', '', '',];
     let currentPlayer = X;
     let isGameActive = true;

     const X_WON = 'X_WON';
     const O_WON = 'O_WON';
     const TIE = 'TIE';

     /*
     Board index
     [0][1][2]
     [3][4][5]
     [6][7][8]
     
     */

     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];
            const a = board[winCondition[0]];
            const b = board[winCondition[1]];
            const c = board[winCondition[2]];
            if (a === '' || b === '' || c === '') {
                continue;
            }
            if (a === b && b === c) {
                roundWon = true;
                break;
            }
        }

        if (roundWon) {
            announce(currentPlayer === 'X' ? X_WON : O_WON);
            isGameActive = false;
            return;
        }

        if (!board.includes(''))
        announce(TIE);
     }

     const announce = (type) => {
        switch(type){
            case O_WON:
                announcer.innerHTML = `Player <span class="O">O</span> Won`;
                break;
            case X_WON:
                announcer.innerHTML = `Player <span class="X">X</span> Won`;
                break;
            case TIE:
                announcer.innerText = 'Tie'
        }
        announcer.classList.remove('hide');
     };

     const isValidAction = (tile) => {
        if (tile.innerText === 'X' || tile.innerText === 'O'){
            return false;
        }

        return true;
     }

     const updateBoard = (index => {
        board[index] = currentPlayer;
     })

     const changePlayer = () => {
        playerDisplay.classList.remove(`player${currentPlayer}`);
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        playerDisplay.innerText = currentPlayer;
        playerDisplay.classList.add(`player${currentPlayer}`);
     }

     const userAction = (tile, index) => {
        if(isValidAction(tile) && isGameActive) {
            tile.innerText = currentPlayer;
            tile.classlist.add(`player${currentPlayer}`);
            updateBoard(index);
            handleResultValidation();
            changePlayer();
        }
     }

     const resetBoard = () => {
        board = ['', '', '', '', '', '', '', '', '',];
        isGameActive = true;
        announcer.classList.add('hide');

        if (currentPlayer === 'O') {
            changePlayer();
        }

        tiles.forEach(tile => {
            tile.innerText = '';
            tile.classList.remove('X')
            tile.classList.remove('O')
        });
     }

     tiles.forEach( (tile, index) => {
        tile.addEventListener('click', () => userAction(tile, index));
     });

    resetButton.addEventListener('click', resetBoard);
});

* {
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.background {
    background-color: pink;
    height: 100vh;
    padding-top: 1px;
}

.title {
    color: orange;
    text-align: center;
    font-size: 40px;
    margin-top: 1%;
}

.display {
    color: orange;
    font-size: 25px;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

.hide {
    display: none;
}

.container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    max-width: 900px;
}

.tile {
    border: 5px solid orange;
    min-width: 100px;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    cursor: pointer;
}

.X {
    color: aquamarine;
}

.O {
    color: brown;
}

.controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

#reset {
    background-color: orange;
    color: white;
    padding: 8px;
    border-radius: 8px;
    border: none;
    font-size: 20px;
    margin-left: 1em;
    cursor: pointer;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
<title>Tic-Tac-Toe</title>
</head>
<body>
    <!-- <script src="index.js"></script> -->
    <main class="background">

        <section class="title">
            <h1>Tic Tac Toe</h1>
        </section>

        <section class="display">
            Player <span class="display-player X">X</span>'s turn
        </section>

        <section class="container">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </section>

        <section class="display announcer hide"></section>
        <section class="controls">
            <button id="reset">Reset Game</button>
        </section>
    </main>
</body>
</html>