Sometimes, we want to get the ID of the element that we clicked on in the JavaScript click event handler.
In this article, we'll look at how to get the ID of the clicked element in the JavaScript click handler.
Set the onclick Property of Each Element to the Same Event Handler Function
One way to let us get the ID of the element when we click on an element is to set the onclick property of each element object to the same click event handler function.
For instance, we can write the following HTML:
<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>
Then we can write the following JavaScript code to set the event handler of each element to the same click event handler:
const onClick = function() {
console.log(this.id, this.innerHTML);
}
document.getElementById('1').onclick = onClick;
document.getElementById('2').onclick = onClick;
document.getElementById('3').onclick = onClick;
The onClick function is the event handler for clicks of each button.
this is the element that we clicked on.
We can get the id property to get the ID of the element that's clicked on.
And innerHTML has the button's content.
Then we assign the onClick function as the value of the onclick property to each button element.
Therefore, when we click on the Button 1 button, we get:
'1' 'Button 1'
logged.
When we click on the Button 2 button, we get:
'2' 'Button 2'
And when we click on the Button 3 button, we get:
'3' 'Button 3'
logged.
Getting the Element Clicked on from the Event Object
Another way to get the element we clicked on in the event handler is to get it from the event object which is the first parameter in the event handler function.
For instance, we can write the following HTML:
<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>
And the following JavaScript code:
const onClick = (event) => {
console.log(event.srcElement.id);
}
window.addEventListener('click', onClick);
We call window.addEventListener to attach the click event listener to the html element.
Then we get the element that's clicked on from the event.srcElement property.
And we can get the ID of that element with the id property.
We can replace event.srcElement with event.target :
const onClick = (event) => {
console.log(event.target.id);
}
window.addEventListener('click', onClick);
and we get the same result.
We can also check if the element we clicked on is a button with the nodeName property.
For instance, we can write:
const onClick = (event) => {
if (event.target.nodeName === 'BUTTON') {
console.log(event.target.id);
}
}
window.addEventListener('click', onClick);
to add an if statement to check if event.target.nodeName is 'BUTTON' before running the console.log method.
This way, we only run the click handler code if we clicked on a button.
Conclusion
We can get the ID of the element that's clicked from the click event handler.
We can either get the value from this if we use a regular function.
Or we can get the same value from the event object of the click event handler.