Check if the Element was Clicked Using JavaScript

While creating forms, programmers may want to add a restriction on the submit button when clicked multiple times, and sometimes there are some situations where the programmers need to check whether the button is clicked or not, like during testing. To do so, use the click event on the element with the help of the event listener.

This tutorial will demonstrate how to check the element is already clicked using JavaScript.

How to Check if the Element was Clicked Using JavaScript?

To check if an element is clicked, associate the click event listener with the element after getting the element’s reference using the getElementById() method.

Let’s check out some examples for a clear understanding.

Example 1: Check if the Element was Already Clicked
In the HTML file, first, create a simple form with an input text field and a button:

Create a submit button with the id “submit” that will be used to access the reference of the button in JavaScript:

<button id = "submit">Submit</button>

In the JavaScript file, add the below-given code:

var submitButton = document.getElementById('submit');
let buttonClicked = false;
submitButton.addEventListener('click', function handleClick() {
console.log('Submit button is clicked');
if (buttonClicked) {
console.log('Submit button has already clicked');
}
buttonClicked = true;
});

In the above code block:

First, get the reference of the button using the “getElementById()” method.
Create a variable “buttonClicked” and set it as “false”.
Call the “addEventListener()” that will handle the click event by defining the “handleClick()” function.
Print the message on the first button and click on the defined function.
When the same button is clicked again, print the message “Submit button has already clicked”.
Change the status of the “buttonClicked” property to “true”.

The output for the given code will be as follows:

Example 2: Restrict the Button Click After a Single Click
To restrict the submit button click, write the below-provided code in the JavaScript file or the <script> tag:

var submitButton = document.getElementById('submit');
let buttonClicked = false;
submitButton.addEventListener('click', function handleClick() {
if (buttonClicked) {
return;
}
console.log('Submit button is clicked');
buttonClicked = true;
});

In the above-given code:

First, get the submit button reference using its assigned id with the help of the “getElementById()” method.
Create a new variable called “buttonClicked” and assign its value to “false”.
In the “addEventListener()” method, define a function called “handleClick()” to manage to click events.
After the button is clicked, set the value of the “buttonClicked” property to “true”.

In this scenario, when the button is clicked for the first time, the added message will be displayed. In the other case, nothing will happen while clicking the same button again and again:

All the necessary information related to checking if the element is already clicked or not using JavaScript is provided in this post.

Conclusion

To check the element is already clicked, use the addEventListener() method on the element after getting the element’s reference using the getElementById() method. Moreover, the value of the checked property of the button can also assist in this regard. This tutorial described the procedure to check if the element is already clicked using JavaScript.

Check if the Element was Clicked Using JavaScript

How to Check if the Element was Clicked Using JavaScript?

Conclusion

About the author

Farah Batool