Sometimes, programmers need to determine the assigned id of the HTML elements, such as a button. Suppose, the developer wants to get the id on the click event of the button, meaning when the specific button is clicked, their assigned id will display on the console or in an alert message.
This post will define the procedure for getting the id of the clicked button using the onclick event.
How to Get/Access the ID of the Clicked Button Using onclick in JavaScript?
For getting/accessing the id of the clicked button, use the following approaches:
Method 1: Get the ID of the Clicked Button Using “event.target.id” Attribute
Use the “event.target.id” attribute for getting the id of the clicked button on the associated “onclick” event. It refers to the “id” property of the element that triggered the event in the DOM tree.
Example
In an HTML file, create five buttons by assigning different ids, “btn1”, “btn2”, “btn3”, “btn4”, and “btn5”, respectively. Attach an “onclick” event that will call the “getID()” function on the button click:
<button id="btn2" onclick="getID()">Button</button>
<button id="btn3" onclick="getID()">Button</button>
<button id="btn4" onclick="getID()">Button</button>
<button id="btn5" onclick="getID()">Button</button>
Create an area using the <p> tag for displaying respective id of the button on the button click:
Now, define a function named “getID()” that will trigger on the click event of the button for getting and displaying the respectively assigned id using the “event.target.id”:
var btnID = event.target.id;
document.getElementById("result").innerHTML = "The Id of the clicked button is: " + btnID;
}
The output indicates the respective ids of the buttons have been successfully displayed:
Method 2: Get the ID of the Clicked Button Using “this.id” Attribute
You can also utilize the “this.id” attribute to access the id of the clicked button. The “this.id” refers to the “id” attribute of the current object. In a DOM event listener, it refers to the “id” of the instance of the element to where the listener was attached.
Example
Here, in the given example, we will call the “getID()” function on the button’s onclick event by passing the “this.id” attribute as a parameter that will return the id of the specified element:
<button id="btn2" onclick="getID(this.id)">Button</button>
<button id="btn3" onclick="getID(this.id)">Button</button>
<button id="btn4" onclick="getID(this.id)">Button</button>
<button id="btn5" onclick="getID(this.id)">Button</button>
<p id="result"></p>
Now, in JavaScript file, define a function “getID()” by passing the id of the button as an argument that will trigger on the button’s click:
document.getElementById("result").innerHTML = "The Id of the clicked button is: " + btnID;
}
Output
That’s all about getting the id of the clicked button using the onclick in JavaScript.
Conclusion
For getting the id of the clicked button on the “onclick” event, use the “event.target.id” attribute or the “this.id” attribute. “this.id” would refer to the “id” of the instance of the element that the listener was attached to, whereas “event.target.id” would refer to the “id” of the element that actually triggered the event, which may be a child element of the element the listener was attached to. In this post, we defined the procedure for getting the id of the clicked button using the onclick event.
