In this blog post you’ll learn how to get the id of clicked HTML element using JavaScript. We’ll see different approaches to get the id of the element which is clicked.
How it works:
We are going to make a few boxes on the document. When the user clicks on any of the boxes its id will appear.
Get the ID of Clicked Element.
Lets first create the design of boxes with HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get clicked element id. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Maketechstuff.com</h1>
<div class="box">
<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>
<div id="id_5"></div>
</div>
<div class="output"></div>
</div>
</body>
</html> CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(90deg, blue, #9c4ac2);
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
font-size: 20px;
text-align: center;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.box div:active {
transform: scale(0.90);
}
.output {
font-size: 25px;
font-weight: bold;
background-color: #f2f2f2;
padding: 10px;
margin: 20px 0px;
border-radius: 5px;
text-align: center;
} Output:
As you can see in the image above, we’ve added 5 boxes. We are going to get their id by clicking on it using JavaScript.
We are going to see 3 approaches to get the id of the clicked element.
Approach 1: Combination of event.target and id property.
Target property returns the element where the event occurred.
id property returns the element id.
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
box.addEventListener("click", get_element_id);
function get_element_id(e){
output.innerHTML = e.target.id;
}
Approach 2: Combination of event.target and getAttribute property.
getAttribute property returns the value of element attribute.
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
box.addEventListener("click", get_element_id);
function get_element_id(e){
output.innerHTML = e.target.getAttribute("id");
}
In both approaches 1 and 2, we only get the id of element which is inside the box class (along with box class) on click.
If you want to get the id of any element present in the document or webpage on a click, You can add event listener to document instead of box class. Like this:
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
document.addEventListener("click", get_element_id);
function get_element_id(e){
output.innerHTML = e.target.id;
// OR
// output.innerHTML = e.target.getAttribute("id");
}
Approach 3: Combining the forEach Method and id property.
JavaScript
let output = document.querySelector(".output");
let box_classes = document.querySelectorAll(".box div");
box_classes.forEach(element => {
element.onclick = function(){
output.innerHTML = element.id;
// Or you can also use getAttribute method.
// output.innerHTML = element.getAttribute("id");
}
});
Output:
So that's how you can get the id of clicked element dynamically using JavaScript. If you have any query or suggestion feel free to write in the comment section.
Share your thoughts.