Check if Element was Clicked using JavaScript

# Check if Element was Clicked using JavaScript

To check if an element was clicked, add a click event listener to the element.

The click event is dispatched every time the element is clicked.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="btn" style="width: 100px; height: 100px">
      Click me
    </button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', function handleClick() {
  console.log('element clicked');
});

check if element was clicked

The code for this article is available on GitHub

We added a click event listener to the button element.

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

# Check if an element has already been clicked before

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

index.js

Copied!
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;
});

element has already been clicked

The code for this article is available on GitHub

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.

# Only allow for the button to be clicked a single time

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

index.js

Copied!
const button = document.getElementById('btn');

let elementClicked = false;

button.addEventListener('click', function handleClick() {
  if (elementClicked) {
    return;
  }

  console.log('element clicked');

  elementClicked = true;
});

only allow single click

The code for this article is available on GitHub

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.

# Periodically check if an element has been clicked

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

index.js

Copied!
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 code for this article is available on GitHub

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if Element was Clicked using JavaScript