How to make a function that increments a number when I click on a Box of html?

Get Help JavaScript
,
#1

Hi guys , it’s been a while !

So , I have been learning HTML and CSS , and Iam trying to make a tic tac toe game.

Iam trying to write a function on JavaScript that increments ( ++) a value ( this value is equal to the round of the game) when I click on the board ( when I places an X or “O” to the board).

I am not really sure how to do it , I thought maybe try to loop or something like that. but this probably requires an EventListener or something like that ??

#2

You may find it easier to use a framework such as React to make a tic-tac-toe game. They have a good tutorial for this on the React website. But it would be a good idea to go through JS and React courses first.

Tic-tac-toe

#3

Hi Mike ,

Thanks for the help, I am just trying to put to the test some of the knowledge I got on HTML and CSS and I have almost completed the JavaScript course on CodeCademy .

I’am really close to achieving the final goal of making the game playable cause the layout is pretty much done. Iam just stuck on some small interactivity ( javaScript) stuff I still dont know how to do. This is what the game looks like so far :smiley:

image
image1366×768 53.7 KB

#4

You can use getElementById to access the element and then assign an onclick method. Here is a little code from one of the projects in the JS course:

let doorImage1 = document.getElementById('door1');

doorImage1.onclick = () => {
//function code
};
1 Like