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:
<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:
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:
<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:
<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:
<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.
