I want to learn JavaScript. So after some basics I was trying to code TicTacToe. I wrote the html and css stuff and then I started with js. I createt an Js file in the js directory and wrote the first function, an basic one, If I was clicking on a div, it should write something in the console. And then I noticed that the function was not called. I have NO IDEA WHY. It works if I write the Js code in the html file, it works if i write document.getElementByID(“ID”).onclick = function(){}, but it doesnt work with the onclick option in html.

# Html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <link type="text/css" rel="stylesheet" href="../css/Main.css">
    <script type="text/javascript" rel="script" src="../js/TicTacToe.js"></script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1" onclick="click()"></div>
        <div id="item2" onclick="click()"></div>
        <div id="item3" onclick="click()"></div>

        <div id="item4" onclick="click()"></div>
        <div id="item5" onclick="click()"></div>
        <div id="item6" onclick="click()"></div>

        <div id="item7" onclick="click()"></div>
        <div id="item8" onclick="click()"></div>
        <div id="item9" onclick="click()"></div>
    </div>
</body>
</html>

#JavaScript File
//Initial constances
let player = true;
let xPlayerPoints = 0;
let yPlaxerPoints = 0;

function click(){
    console.log("Test");
}

#CSS File
.headline{
    grid-area: headspace;
    background-color: #20c997;
    border-radius: 5px;
    font-size: 26px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-container{
    display: grid;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: 'headspace headspace headspace';
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    padding: 5px;
    background-color: #dde0e3;
    border: 1px solid black;
    border-radius: 5px;
}

.grid-container div{
    cursor: pointer;
    display: flex;
    aspect-ratio: 1;
    border-radius: 5px;
    text-align: center;
    background-color: White;
}

Picture of the Project Structure

4

Attach the event handler through the DOM API, ie. using .addEventListener.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <style type="text/css">
        .headline{
            grid-area: headspace;
            background-color: #20c997;
            border-radius: 5px;
            font-size: 26px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-container{
            display: grid;
            width: 33%;
            margin-left: auto;
            margin-right: auto;
            grid-template-areas: 'headspace headspace headspace';
            grid-template-columns: auto auto auto;
            grid-gap: 5px;
            padding: 5px;
            background-color: #dde0e3;
            border: 1px solid black;
            border-radius: 5px;
        }

        .grid-container div{
            cursor: pointer;
            display: flex;
            aspect-ratio: 1;
            border-radius: 5px;
            text-align: center;
            background-color: White;
        }
    </style>
    <script type="text/javascript">
        //Initial constances
        let player = true;
        let xPlayerPoints = 0;
        let yPlaxerPoints = 0;

        function click(){
            console.log("Test");
        }

        document.addEventListener ( 'DOMContentLoaded', ( ) => {
           Array.from(document.querySelectorAll ( 'div.grid-container > div' )).forEach ( pe => { pe.addEventListener ( 'click', click ); } );
        }); 
    </script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>

        <div id="item4"></div>
        <div id="item5"></div>
        <div id="item6"></div>

        <div id="item7"></div>
        <div id="item8"></div>
        <div id="item9"></div>
    </div>
</body>
</html>

There are two issues.

  1. You’re including the JS before the markup. Move the to the bottom of the file, just before the closing tag
  2. You’re using a keyword to name a function clickinstead use say handleClick.

Full working codepen Check the console for log output.

It is because you are only defining a function and not calling it anywhere in the code

Also make sure use Add a javascript file to your html. Learn more. https://www.w3schools.com/tags/att_script_src.asp

function click(){
    console.log("Test");
}
//Call this function
click();

Learn more about Javascript here : Javascript function

2

You need to include the script tag below all elements using it and above the body end tag or you could do this.

Include defer in the script tag and it will act as if it were at the bottom

When you use the script tag it acts just as js normally does and it executes everything by line in numerical order so what it is doing is its executing the js file without any information from the html. Hope this helped