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

时间：2018-03-09 19:05:04

标签： javascript html 





    <!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>

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.

6 个答案:

答案 0 :(得分：2)

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>

答案 1 :(得分：1)

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>

答案 2 :(得分：0)

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()

答案 3 :(得分：0)

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>

答案 4 :(得分：0)

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>

答案 5 :(得分：0)

看起来有人已经提供了这条路线但是最简单的 -

＆＃13;
＆＃13; 
function getCustomID(){
    var results = event.target.attributes['data-custom-id'].value;
    console.log(results);
    return results;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题