How to Check if an Element was Clicked in JavaScript

Detecting when a user clicks on an element is the foundation of an interactive web page. Whether it's a button, a div, or an image, the standard way to "check" for a click is not to check at all, but to listen for it. The primary tool for this is the addEventListener method.

This guide will teach you how to set up a click event listener, how to run code when an element is clicked, and how to handle the common scenario of ensuring a click event only runs its logic once.

The Core Method: addEventListener('click', ...)

Instead of constantly checking if an element has been clicked, the correct approach in JavaScript is to register a callback function. This function will be executed automatically by the browser whenever the specified event, in this case a click, occurs on the element.

The syntax:

element.addEventListener('click', functionToRunOnClick);

where:

• element: The DOM element you want to monitor.
• 'click': The name of the event to listen for.
• functionToRunOnClick: The function that will be executed each time the element is clicked.

Basic Example: Responding to a Button Click

This is the most fundamental use of a click listener.

<button id="myButton">Click Me</button>

const button = document.getElementById('myButton');

button.addEventListener('click', function handleClick() {
  console.log('The button was clicked!');
  // You can run any code you want inside this function.
});

How to Check if a Click Has Already Happened

Sometimes you need to know if a specific action has been triggered at least once. You can't ask the element directly, but you can use a simple boolean "flag" variable to keep track of the state.

Problem: how can we track whether a button has been clicked before?

Solution: use an external variable to record the state.

const button = document.getElementById('myButton');
let hasBeenClicked = false;

button.addEventListener('click', function handleClick() {
  if (hasBeenClicked) {
    console.log('This button has been clicked before.');
  } else {
    console.log('This is the first time the button has been clicked.');
    hasBeenClicked = true; // Set the flag to true after the first click
  }
});

How to Handle Only the First Click on an Element

A common requirement is to have a button that can only be clicked once, for example, to prevent a user from submitting a form multiple times.

There are two excellent ways to achieve this.

Method 1: Using a Flag (Manual)

This is a straightforward extension of the previous example. We use a flag to guard our logic.

const submitButton = document.getElementById('submitButton');
let isSubmitting = false;

submitButton.addEventListener('click', () => {
  if (isSubmitting) {
    console.log('Already submitting, please wait...');
    return; // Do nothing on subsequent clicks
  }

  console.log('Submitting the form...');
  isSubmitting = true;
  
  // Disable the button to provide visual feedback
  submitButton.disabled = true;
  submitButton.textContent = 'Submitting...';
  
  // (Simulate a network request)
});

Method 2: Using the { once: true } Option (Recommended)

addEventListener has a special option that automatically removes the event listener after it has run once. This is the cleanest and most modern way to handle a single-use event.

const onceButton = document.getElementById('onceButton');

function handleFirstClick() {
  console.log('This will only ever run once!');
  
  // The event listener is automatically removed after this function executes.
  onceButton.disabled = true;
  onceButton.textContent = 'Clicked!';
}

onceButton.addEventListener('click', handleFirstClick, { once: true });

Conclusion

Checking for a click in JavaScript is about listening for an event, not actively polling for a state.

• The standard and most important tool is element.addEventListener('click', callback), which runs a function every time a click occurs.
• To track if a click has occurred previously, use an external boolean flag that you set to true inside the listener.
• To handle an event only once, the best and most modern approach is to use the { once: true } option in your addEventListener call.