Check if Element was Clicked using JavaScript

avatar

Borislav Hadzhiev

Tue Jan 11 20222 min read

Check if Element was Clicked using JavaScript #

To check if an element was clicked, add a click event listener to the element, e.g. button.addEventListener('click', function handleClick() {}). The click event is dispatched every time the element is clicked.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn" style="width: 100px; height: 100px"> Click me </button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const button = document.getElementById('btn'); button.addEventListener('click', function handleClick() { console.log('element clicked'); });

We added a click event listener to the button element.

Every time the button is clicked, the handleClick function is invoked.

If you need to detect if an element has already been clicked before, declare a variable in the upper scope and keep track of its value.

index.js
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick() { console.log('element clicked'); if (elementClicked) { console.log('button has already been clicked before'); } elementClicked = true; });

We declared the elementClicked variable and initialized its value to false.

If the button element is clicked, we set the variable's value to true.

You can use this approach to only run the handleClick function the first time you click the element.

index.js
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick() { if (elementClicked) { return; } console.log('element clicked'); elementClicked = true; });

Once the handleClick function gets invoked, the value of the elementClicked variable is set to true.

On the next invocation of the function, we check if the value of the variable is truthy and return straight away.

If you try the example above, you will only see the element clicked message logged once to your console.

Note that you can add a click event listener to any type of element, it doesn't have to be a button.

You can also use the setInterval method to periodically check if an element has been clicked.

index.js
const button = document.getElementById('btn'); let elementClicked = false; button.addEventListener('click', function handleClick() { console.log('element clicked'); elementClicked = true; }); setInterval(() => { if (elementClicked) { console.log('element was clicked'); } else { console.log("element hasn't been clicked yet"); } }, 1500); // 👉️ invoke every 1500 milliseconds

The function we passed to the setInterval method runs every 1.5 seconds and checks if the element has been clicked or not.

However, note that it is more efficient to use specific events, like click that only get dispatched when the element gets clicked.
Use the search field on my Home Page to filter through my more than 1,000 articles.