How to Check Whether a Button Is Clicked by JavaScript

Anika Tabassum Era Feb 02, 2024 JavaScript JavaScript Button JavaScript EventListener
  1. Use onclick HTML Attribute to Check Button Click in JavaScript
  2. Use onclick as JavaScript Method
  3. Use addEventListener Method to Check Button Clicks
How to Check Whether a Button Is Clicked by JavaScript

In JavaScript, the onclick method and the addEventListener are the most common way to manipulate an action.

We will use onclick as an HTML attribute to check if the button is clicked. Again, we will continue the check with the onclick method by manipulating the DOM, and later we will see the use of the addEventListener to understand if the button click is working or not.

Use onclick HTML Attribute to Check Button Click in JavaScript

For this instance, we will take a button tag element and add the attribute onclick.

The attribute will have a function called whenever the button is clicked. Though onclick is fully a JavaScript method, as an HTML attribute, it is pretty common to use for triggering a specified function on click event.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn" onclick="clicked()">Click here</button>
  <script>
   const btn = document.getElementById('btn');
  function clicked(){
    btn.style.background = "purple";
    console.log("CLICKED");
  }
  </script>
</body>
</html>

Output:

onclick_attribute

In this example, the function clicked() has a code body that changes the style background from gray to purple whenever the button is clicked.

Use onclick as JavaScript Method

onclick in JavaScript focuses on only one event to call the callback function. This method also emphasizes executing a function body that is declared after the initiation of the method.

But first, the onclick method requires an object to be followed. The HTML element’s querySelector defines the object here.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn">Click here</button>
  <script>
  const btn = document.getElementById('btn');
    btn.onclick = function(){
      btn.style.color = "yellow";
    console.log("CLICKED!");
    }
  </script>
</body>
</html>

Output:

onclick_method

Here, the occurrence of the click event outputs in the console as CLICKED! and the button style also gets to change its font color from white to yellow. The btn.onclick method sets off to run the corresponding function, and thus the change after the click is visualized.

Use addEventListener Method to Check Button Clicks

Usually, the addEventListener method is not supported by the older browsers, but it can punch on multiple events.

Here, we will use one event, click, and the function that the event will handle will fire the button to change. Also, we will print something in the console panel to be more sure about the event activity.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    input{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
    p{
      background: white;
      color: gray;
    }
  </style>
</head>
<body>  
  <input type="button" id="btn" value="Click Here">
  <p id="after"></p>
  <script>
    const btn = document.getElementById('btn'); 
    function getItDone(){
      document.getElementById('after').innerHTML = "I am clicked."
      console.log("CLICKED!");
    }
    btn.addEventListener('click', getItDone);
  </script>
</body>
</html>

Output:

addeventlistener

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
Author: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Related Article - JavaScript Button

Related Article - JavaScript EventListener