Skip to main content

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.
});
note

Every time you click the button, the message "The button was clicked!" will appear in the console.

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
  }
});
note

The hasBeenClicked variable exists outside the event listener, so its value persists between clicks. The first time the button is clicked, the else block runs. On all subsequent clicks, the if block will run.

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 });
note

This is the recommended approach for any "click-once" scenario due to its simplicity and readability.

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.

Table of Contents