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

Given a set of button and the task is to determine the ID of the button when it is clicked using JavaScript and jQuery.

Get the ID of clicked button using JavaScript

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Get the ID of the clicked button
            using 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>
            var el_up = document.getElementById("GFG_UP");
            var 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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example sets a onClick event in the <script> tag individually to each button, When button is clicked, the ID of the button is passed to the function and then print the ID on the screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Get the ID of the clicked button
            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">Button 1</button>
        <button id="2">Button 2</button>
        <button id="3">Button 3</button>
  
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = "Click on button to get ID";
              
            document.getElementById('1').onclick = GFG_click;
            document.getElementById('2').onclick = GFG_click;
            document.getElementById('3').onclick = GFG_click;
              
            function GFG_click(clicked) {
                el_down.innerHTML = "Button clicked, id = "
                    + this.id;
            }         
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Get the ID of clicked button using jQuery

jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.

Syntax:

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

Parameters:

  • event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
  • childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
  • data: This parameter is optional. It specifies the additional data to pass to the function.
  • function: This parameter is required. It specifies the function to run when the event occurs.
  • map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.

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)

Parameters: This method accepts single parameter function which is optional. It specifies the function to run when the click event occurs.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Get the ID of the clicked button
            using jQuery
        </title>
          
        <script src =
        </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() {
                var t = $(this).attr('id');
                $('#GFG_DOWN').text("ID = " + t);
            });                     
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Get the ID of the clicked button
            using jQuery
        </title>
          
        <script src
        </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() {
                var t = (this.id);
                $('#GFG_DOWN').text("ID = " + t);
            });                     
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.