Solution 1 :

Seems like document.querySelectorAll(‘.cell’) has nothing to select as you included the script to early in the html…

Try to put

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

after the end of the section-tag and it should work.

But IMHO: Try to figure out, at which time javascript is executed and why 😉

Problem :

I’ve tried with this JavaScript code I’ve found on the net and modified a little a bit ( it still worked with the original HTML but not with mine ). Here is the link to the original code: link

This is my modified JavaScript code:

let currentPlayer = "X";
let player = 1;

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

function handleCellClick(clickedCellEvent) {
    const clickedCell =;
    if(clickedCell.innerHTML != "")
    alert("Click somewhere else!");

function handleCellPlayed(clickedCell) {
    clickedCell.innerHTML = currentPlayer;

function handlePlayerChange() {
    if(player%2 == 1)
        currentPlayer = "X";
    if(player%2 == 0)
        currentPlayer = "O";

And this is the new, HTML made by me, I’ve gave the same class="cell" attribute to every DIV but still it doesn’t works. 🙁

    <script src="script.js"></script>
    <div class="board">
        <div class="column1">  
            <div class="cell" id="11"></div>
            <div class="cell" id="12"></div>
            <div class="cell" id="13"></div>
            <div class="cell" id="14"></div>
            <div class="cell" id="15"></div>
        <div class="column2">
            <div class="cell" id="21"></div>
            <div class="cell" id="22"></div>
            <div class="cell" id="23"></div>
            <div class="cell" id="24"></div>
            <div class="cell" id="25"></div>
        <div class="column3">
            <div class="cell" id="31"></div>
            <div class="cell" id="32"></div>
            <div class="cell" id="33"></div>
            <div class="cell" id="34"></div>
            <div class="cell" id="35"></div>
        <div class="column4">
            <div class="cell" id="41"></div>
            <div class="cell" id="42">X</div>
            <div class="cell" id="43"></div>
            <div class="cell" id="44"></div>
            <div class="cell" id="45"></div>
        <div class="column5">
            <div class="cell" id="51"></div>
            <div class="cell" id="52"></div>
            <div class="cell" id="53">O</div>
            <div class="cell" id="54"></div>
            <div class="cell" id="55"></div>


Comment posted by shutsman

you should move

Comment posted by Master.Deep

You are missing Css. Please use css from your reference link

Comment posted by Sonsloy

Thanks, yes the was the problem. 😀 I didn’t included the CSS, I was pretty confident that it didn’t cause the problem.

Comment posted by Sonsloy

The JavaScript waits for the user to click on a DIV with the class=”cell” attribute, then it calls the handleCellClick function. I just didn’t knew I have to put the link to the end. 😀 Was this what you meant by “Try to figure out, at which time javascript is executed and why ;-)” ? Thanks again.