I cant call external JavaScript functions-CodePudding

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 >
        <label >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

CodePudding user response：

There are two issues.

You're including the JS before the markup. Move the to the bottom of the file, just before the closing tag
You're using a keyword to name a function click, instead use say handleClick.

Full working codepen Check the console for log output.

CodePudding user response：

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

No need to rename the handler function with this solution, though it is recommended nonetheless.

In the live demo below, CSS an JS programming are defined inline, but it is perfectly fine to include these parts through links.

For more info see the docs (MDN).

<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', ( ) => { // Wrapper ensures that the DOM exists when the following code gets executed.
           Array.from( 
               document.querySelectorAll ( 'div.grid-container > div' )  // Choose the elements representing the cells of the TicTacToe board
           ) // Converts from NodeList type
               .forEach ( pe => {
                    pe.addEventListener ( 'click', click );
               });  // Attach the 'click' function as a click handler to every selected element
        }); 
    </script>
</head>
<body>
    <div >
        <label >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>

CodePudding user response：

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

CodePudding user response：

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