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;
}
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 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>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