How to check a button is clicked or not in JavaScript ?

Last Updated : 12 Sep, 2024

Checking if a button is clicked in JavaScript involves detecting user interactions with the button element. This is typically achieved by adding an event listener, such as onclick or addEventListener(click), which triggers a specific function or action when the button is clicked.

There are two methods to check whether a button is clicked or not, these are:

Table of Content

Using onclick Event
Using click Event

Method 1: Using onclick Event

The Using the onclick Event approach involves assigning a function directly to the onclick property of a button element. This method triggers the function whenever the button is clicked, allowing you to handle click events easily and directly.

Example: In this example, we Clicking the button triggers myGeeks() which sets the button's onclick handler to show an alert. The alert appears when the button is clicked, indicating it's working.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to check a button is clicked
        or not in JavaScript?
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        input[type="button"] {
            padding: 5px 10px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to check a button is clicked
        or not in JavaScript?
    </h3>

    <input type="button" 
           class="button" 
           value="Button" 
           onclick="myGeeks()">

    <script>
        function myGeeks() {
            document.querySelector(".button").
                onclick = function () {
                    alert("Button Clicked");
                }
        }
    </script>
</body>

</html>

Output:

Method 2: Using click Event

The Using click Event approach employs addEventListener(click) to attach a click event listener to a button element. This method separates JavaScript logic from HTML, enhancing maintainability. When the button is clicked, the specified function is executed, enabling desired actions.

Example: In this example, we clicking the button triggers the myGeeks() function, which adds a click event listener to the button. This listener shows an alert with "Button Clicked" when activated.