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

How to Add event listener to Button in JavaScript ?

Last Updated : 22 Jul, 2024

In web development adding an event listener to a button is a common task that allows us to execute JavaScript code in response to user interactions, such as clicks. This helps us to create interactive and flexible web pages.

Using addEventListener()

The addEventListener method is a versatile and widely used way to attach event listeners to elements. It allows us to add multiple events to a single element and provides better control over event handling.

Syntax:

element.addEventListener(event, function, useCapture);

Where:

element: The button element.
event: The event type (e.g., 'click').
function: The function to execute when the event occurs.

Example: In below example we have added the 'click' event listener to the button using the addEventListener method.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 50vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        div {
            margin-bottom: 20px;
            font-size: 18px;
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div>Adding Event Listener using
        addEventListener method</div>
    <button id="myButton">Click Me</button>
    <script>
        document.getElementById('myButton')
            .addEventListener('click', function () {
                alert('Button clicked!');
            });
    </script>
</body>

</html>

Output:

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

G

ghuleyogesh

Improve

Article Tags :

Similar Reads

How To Add Hover Effects To A Button In JavaScript?

Modern web design would not be the same without hover effects, which improve user experience by giving visual clues when buttons and other interactive elements are interacted with.More flexibility and interactivity than can be achieved with CSS alone are made possible by the addition of dynamic hove

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

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 method

What is the best way to add an event in JavaScript ?

Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM).There are three ways to assign an event handler:Â HTML event handler attributeHTML DOM propertyHTML DOM addEventListener() methodThe best way to add an event in Jav

How to trigger events in JavaScript ?

JavaScript is a high-level, interpreted, dynamically typed client-side scripting language. While HTML is static and defines the structure of a web page, JavaScript adds interactivity and functionality to HTML elements. This interaction is facilitated through events, which are actions or occurrences

How to Change Button Label in Alert Box using JavaScript ?

In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreat

How to Add an Input Field on Button Click in JavaScript ?

JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically