Open In App

How to get the ID of the clicked button using JavaScript/jQuery ?

Last Updated : 22 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To get the ID of a clicked button using JavaScript/jQuery means identifying which specific button was clicked within a webpage. This is useful when multiple buttons exist, and you need to distinguish between them based on their unique ID for further processing.

So, to get the ID of the clicked button using JavaScript/jQuery we have different approaches which are as follows:

Approach 1: Using JavaScript onClick event

The JavaScript onClick event approach involves adding the onclick attribute to each button. When clicked, the button’s ID is passed to a function, enabling you to identify the clicked button and perform specific actions.

Example: This example sets an onClick event to each button, when the button is clicked, the ID of the button is passed to the function then it prints the ID on the screen. 

html
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Get the ID of the clicked button
        using onClick event in JavaScript
    </title>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="font-size: 15px; 
                          font-weight: bold;">
    </p>

    <button id="1" onClick="GFG_click(this.id)">
        Button1
    </button>

    <button id="2" onClick="GFG_click(this.id)">
        Button2
    </button>

    <button id="3" onClick="GFG_click(this.id)">
        Button3
    </button>

    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>

    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on button to get ID";

        function GFG_click(clicked) {
            el_down.innerHTML = "ID = " + clicked;
        }        
    </script>
</body>

</html>

Output:

Using JavaScript onClick event

Approach 2: Using jQuery on() Method

The jQuery on() method dynamically attaches click events to elements. It captures the button’s ID using $(this).attr(“id”) when clicked. This approach is flexible, handling both static and dynamically generated buttons efficiently within the DOM.

Syntax: 

$(selector).on(event, childSelector, data, function, map);

Example: This example sets an onClick event by using the on() method for each button, When the button is clicked, the ID of the button is passed to the function, and then print the ID on the screen. 

html
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Get the ID of the clicked button
        using jQuery
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="font-size: 15px; 
                          font-weight: bold;">
    </p>

    <button id="1"> Button1</button>
    <button id="2"> Button2</button>
    <button id="3"> Button3</button>

    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>

    <script>
        $('#GFG_UP').text("Click on button to get ID");

        $("button").on('click', function () {
            let t = (this.id);
            $('#GFG_DOWN').text("ID = " + t);
        });                    
    </script>
</body>

</html>

Output:

Using jQuery on() Method

Approach 3: Using jQuery click() Method

This method triggers the click event, or adds a function to run when a click event occurs. Click event occurs when an element is clicked. 

Syntax: 

  • Trigger the click event for the selected elements: 
$(selector).click();
  • Adds a function to the click event: 
$(selector).click(function);

Example: This example sets an onClick event by using the click() method for each button, When the button is clicked, the ID of the button is passed to the function, and then print the ID on the screen. 

html
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Get the ID of the clicked button
        using jQuery
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="font-size: 15px; 
                          font-weight: bold;">
    </p>

    <button id="1"> Button1</button>
    <button id="2"> Button2</button>
    <button id="3"> Button3</button>

    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>

    <script>
        $('#GFG_UP').text("Click on button to get ID");

        $("button").click(function () {
            let t = $(this).attr('id');
            $('#GFG_DOWN').text("ID = " + t);
        });                    
    </script>
</body>

</html>

Output:

Using jQuery click() Method

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Next Article

Similar Reads