CODEWITHSUNDEEP
javascripthtml
Anil Poudel
Anil Poudel

Reputation: 31

How do I get the id of clicked element using pure javascript?

This is the HTML code which has 3 divs with same class name and one with a different class name. I want to write a (pure) JavaScript function that has to return me the value of respective custom-id of the div only when I clicked on the div element with class div1.I want to invoke the onclick event from the JavaScript as well.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

</head>

<body>
  <div style="width: 100px; height: 100px; background: green;" class="div1" data-custom-id="123">Some text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div1" data-custom-id="456">Some more text</div>
  <div style="width: 100px; height: 100px; background: green;" class="div1" data-custom-id="1223">More text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div2" data-custom-id="4526">Seperate div</div>
  <script>
    (function() {

      let displayedId = [];
      let len = document.getElementsByClassName('div1');
      for (var i = 0; i < length; i++) {
        displayedId.push((len[i].getAttribute('data-custom-id')));
      }
    })();
  </script>
</body>

</html>

Upvotes: 0

Views: 8133

Answers (6)

Gurgen Grigoryan
Gurgen Grigoryan

Reputation: 265

Looks like someone already provided this route but will be the easiest - 

function getCustomID(){
    var results = event.target.attributes['data-custom-id'].value;
    console.log(results);
    return results;
}
<body>
    <div class="box" data-custom-id="123" onclick="getCustomID(this)">Click Me</div>
    <div class="box" data-custom-id="456" onclick="getCustomID(this)">Click Me</div>
    <div class="box" data-custom-id="789" onclick="getCustomID(this)">Click Me</div>
    <div class="box" data-custom-id="000" onclick="getCustomID(this)">Click Me</div>
</body>

Upvotes: 0

Lalit Mohan
Lalit Mohan

Reputation: 474

Pass the ID as function parameter. 

  <div id="1" onClick="click_me(this.id)">Div 1</div>
  <div id="2" onClick="click_me(this.id)">Div 2</div>
  <div id="3" onClick="click_me(this.id)">Div 2</div>

   <script type="text/javascript">
    function click_me(clicked_id)
    {
        console.log(clicked_id);
    }
  </script>

An you can recive the id in function

    function click_me(clicked_id)
    {
        console.log(clicked_id);
    }
    <div id="1" onClick="click_me(this.id)">Div 1</div>
    <div id="2" onClick="click_me(this.id)">Div 2</div>
    <div id="3" onClick="click_me(this.id)">Div 2</div>

Upvotes: 1

yajiv
yajiv

Reputation: 2941

Or you can do this. Write onclick function which will return id of element whenever click.

function fun(){
  console.log(event.target.attributes['define-custom-id'].value);
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	
</head>
<body>
	<div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="123" onclick="fun(this)">Some text</div>
	<div style="width: 100px; height: 100px; background: red;" class="div1" define-custom-id="456" onclick="fun(this)">Some more text</div>
	<div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="1223" onclick="fun(this)">More text</div>
	<div style="width: 100px; height: 100px; background: red;" class="div2" define-custom-id="4526" onclick="fun(this)">Seperate div</div> 
</body>
</html>

Upvotes: 0

romeuBraga
romeuBraga

Reputation: 2165

Try this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="width: 100px; height: 100px; background: green;" class="myDivs div1" define-custom-id="123">Some text</div>
    <div style="width: 100px; height: 100px; background: red;" class="myDivs div1" define-custom-id="456">Some more text</div>
    <div style="width: 100px; height: 100px; background: green;" class="myDivs div1" define-custom-id="1223">More text</div>
    <div style="width: 100px; height: 100px; background: red;" class="myDivs div2" define-custom-id="4526">Seperate div</div> 

    <script>
        var myDivs = document.getElementsByClassName('myDivs');

        for(var i = 0; i < myDivs.length; i++) {
            myDivs[i].addEventListener('click', function (event) {
                alert(this.getAttribute("define-custom-id"));
            });
        }       
    </script>
</body>
</html>

Upvotes: 2

Gustavo Topete
Gustavo Topete

Reputation: 1286

It's easy to achieve, look at my snippet: 

document.addEventListener('readystatechange',()=>{
  if(document.readyState=='interactive'){
    document.addEventListener('click',(event)=>{
      console.log(event.target.getAttribute('define-custom-id'));
    }) 
  }
});
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	
</head>
<body>
	<div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="123">Some text</div>
	<div style="width: 100px; height: 100px; background: red;" class="div1" define-custom-id="456">Some more text</div>
	<div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="1223">More text</div>
	<div style="width: 100px; height: 100px; background: red;" class="div2" define-custom-id="4526">Seperate div</div> 
</body>
</html>

This is the part that does it all:

document.addEventListener('click',(event)=>{
      console.log(event.target.getAttribute('define-custom-id'));
    })

The other part is the equivalent in jquery of:

$(document).ready()

Upvotes: 0

Phiter
Phiter

Reputation: 14992

You'll have to add an event listener to every element of that class, like this:

var divs = document.querySelectorAll(".div1");

var clickFunction = function(event){
    var id = event.target.attributes['define-custom-id'].value;
    alert(id);
};

for (var i = 0; i < divs .length; i++) {
    divs[i].addEventListener('click', clickFunction , false);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

</head>

<body>
  <div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="123">Some text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div1" define-custom-id="456">Some more text</div>
  <div style="width: 100px; height: 100px; background: green;" class="div1" define-custom-id="1223">More text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div2" define-custom-id="4526">Seperate div</div>
</body>

</html>

Your elements don't have id , so you can't simply do e.target.id. I'd recommend that you use data-* attributes instead, as they are accepted in HTML5 standards.

Like this:

var divs = document.querySelectorAll(".div1");

var clickFunction = function(event){
    var id = event.target.dataset.customId;
    alert(id);
};

for (var i = 0; i < divs .length; i++) {
    divs[i].addEventListener('click', clickFunction , false);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

</head>

<body>
  <div style="width: 100px; height: 100px; background: green;" class="div1" data-custom-id="123">Some text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div1" data-custom-id="456">Some more text</div>
  <div style="width: 100px; height: 100px; background: green;" class="div1" data-custom-id="1223">More text</div>
  <div style="width: 100px; height: 100px; background: red;" class="div2" data-custom-id="4526">Seperate div</div>
</body>

</html>

Upvotes: 5

Related Questions