August 8, 2021

How to Detect Which Button is Clicked in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to detect which button is clicked in javascript. The first thought that will come to your mind would be, why not just add a click event listener to all the buttons and then let the event handler function execute whatever piece of code we want.

The answer is yes, you can do that. The above approach is fine if you have just a couple of buttons that you can easily select by using a document.querySelector() or document.querySelectorAll() method and attach click event listener to each of them. But if you have a lot of buttons, then the above approach is not elegant.

Detect Button Using Event Propagation

In such situations, it’s better to take advantage of event propagation. Event propagation defines the propagation of an event from the outermost element to the innermost element and vice versa. The three phases of event propagation are capturing phase, target phase, and bubbling phase.

Capturing phase is the first phase of event propagation. In this phase, the event propagates from the outermost element to the innermost element.

The target phase is the second phase of event propagation. In this phase, the event is reached to the innermost element.

The bubbling phase is the third phase of event propagation. In this phase, the event propagates from the innermost element to the outermost element.

The following example is pretty straightforward. We have three buttons and with the help of event propagation, we will detect which button is clicked by the user and display its id and inner text on the screen. Please have a look over the code example and steps given below.

HTML & CSS

We have one div element, three button elements, and one h1 element in the HTML file. The div element is just a wrapper for the rest of the elements.

The three buttons have unique ids (btn1, btn2, btn3) and inner texts (Login, Submit, Reset).
The h1 element has “Result” as inner text which will be later replaced by our template string.
We have centered aligned the elements by using the style attribute on the div element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div style="text-align: center;">
        <button id="btn1">Login</button>
        <button id="btn2">Submit</button>
        <button id="btn3">Reset</button>
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>

</html>

Javascript

We have selected only the h1 element using the document.querySelector() method and stored it in the result variable.

From event bubbling, you know that almost all events bubble up, that’s why we have attached a click event listener to the document because no matter what element you click, it will always go all the way up to the document.
Inside the event handler function, we are storing the target element in the element variable. This helps us in grabbing further details about the element who is responsible for initiating the event.
We are simply checking if the element is a button by using its tagName property.

If the element is a button, then we will create a template string that contains the button id and innerText.
We will set the template string as an inner text for the h1 element.

let result = document.querySelector('h1');

document.addEventListener('click', (e) => {
    let element = e.target;
    if(element.tagName == "BUTTON"){        
        result.innerText = `${element.id}: ${element.innerText}`;
    }
});

Detect Button Using Event Propagation

You May Also Like: