JavaScript

How to Get ID of Clicked Button Using JavaScript/jQuery?

Sometimes a developer has to know the ID of the button which the user has clicked to decide further course of action on a webpage. As you will see in this write-up, this can be done through both vanilla JavaScript and jQuery. So, let’s begin:

First, we will create a simple HTML webpage which has two buttons at the centre of the page:

<!DOCTYPE html>
<html>
    <body>
        <center>
            <div style="margin-top: 50px;">
                <h2>Click one of the following buttons</h2>
                <button id="button_one" style="width: 100px; height:40px; margin-right: 10px;">1</button>
                <button id="button_two" style="width: 100px; height:40px;">2</button>  
            </div>    
        </center>
    </body>
</html>

 

How to Get the ID of the Clicked Button Using JavaScript?

We can get the ID of the clicked button using JavaScript in several different methods. In our first method, we will get the nodelist of all the button tags and store them inside a variable. Then we will iterate over the nodelist to get the ID of the button which has been clicked:

<script>

        var buttons = document.getElementsByTagName("button");
        for (let index = 0; index < buttons.length; index++) {
            buttons[index].onclick = function () {
                alert(this.id);
         }
        }
       
</script>

 
We can also set-up each button with onclick event individually:

<!DOCTYPE html>
<html>
    <body>
        <center>
            <div style="margin-top: 50px;">
                <h2>Click one of the following buttons</h2>
                <button id="button_one" style="width: 100px; height:40px; margin-right: 10px;" onclick="alertId(this.id)">1</button>
                <button id="button_two" style="width: 100px; height:40px;" onclick="alertId(this.id)">2</button>  
            </div>    
        </center>
    </body>
    <script>

        function alertId(id) {
            alert(id)
        }
       
    </script>
</html>

 

 

How to Get the ID of the Clicked Button Using jQuery?

jQuery also has several different methods which can be used to get the ID of a clicked button. We’ll start with the click() method that is applied on a selector and takes a function name as an optional argument:

<!DOCTYPE html>
<html>
    <body>
        <center>
            <div style="margin-top: 50px;">
                <h2>Click one of the following buttons</h2>
                <button id="button_one" style="width: 100px; height:40px; margin-right: 10px;" onclick="alertId(this.id)">1</button>
                <button id="button_two" style="width: 100px; height:40px;" onclick="alertId(this.id)">2</button>  
            </div>    
        </center>
    </body>
    <script>

        $("button").click(alertId($(this).attr("id")));  

        function alertId(id) {
            alert(id)
        }
       
    </script>
</html>

 

 

We can also use the on() method to attach event handlers to elements. The on() method takes at least one event as an argument along with some other optional arguments:

<!DOCTYPE html>
<html>
    <body>
        <center>
            <div style="margin-top: 50px;">
                <h2>Click one of the following buttons</h2>
                <button id="button_one" style="width: 100px; height:40px; margin-right: 10px;" onclick="alertId(this.id)">1</button>
                <button id="button_two" style="width: 100px; height:40px;" onclick="alertId(this.id)">2</button>  
            </div>    
        </center>
    </body>
    <script>

        $("button").on('click', alertId($(this).attr("id")));

        function alertId(id) {
            alert(id)
        }
       
    </script>
</html>

 

Conclusion

The ID of a clicked button can be accessed through both plain JavaScript and jQuery. We discussed four such methods and gave in-depth detail and relevant examples in this write-up.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.