Using DOM to get element id's inside onclick

Question

I'm trying to access id's of elements fetched by getElementsByTagName but I'm getting an error：

var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
  divs[i].onclick=function(){
    alert(divs[i].id); 
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	<div id="1">1</div>
	<div id="2">2</div>
	<div id="3">3</div>
	<div id="4">4</div>
	<div id="5">5</div>
	<div id="6">6</div>
</body>
</html>

The error is:

Uncaught TypeError: Cannot read property 'id' of undefined

When I change

alert(divs[i].id);

to

alert(this.id);

it works, but I don't understand why this happens.

Within the click handler, this refers to the element clicked, and it no longer has a reference to the appropriate i — Jrd
– Jrd, Commented Aug 7, 2015 at 1:39
If you must use alert(divs[i].id);, try for (var i = 0; i < divs.length; i++) { (function(i) { divs[i].onclick = function () { alert(divs[i].id); } })(i); }. — akinuri
– akinuri, Commented Aug 7, 2015 at 2:07

iplus26 · Accepted Answer · 2015-08-07 01:53:43Z

2

var divs=document.getElementsByTagName("div");
for(var i=0; i < divs.length;i++){
  divs[i].onclick=function(){
    alert(this.id); 
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	<div id="1">1</div>
	<div id="2">2</div>
	<div id="3">3</div>
	<div id="4">4</div>
	<div id="5">5</div>
	<div id="6">6</div>
</body>
</html>

this.id works because:

After you added a onclick to the element, the element call the function if you click on the element.

After the loop, i will be increased to the length of the divs array (which is 6). And when the element is clicked and the function is called, divs[6] is undefined and you can't get id of undefined, while the function can understand this points to the clicked element and it will work.

edited Aug 7, 2015 at 1:53

answered Aug 7, 2015 at 1:42

iplus26

2,68618 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nian Over a year ago

thank you for your help ^_^ I add alert(i); before alert(divs[i].id); and test, it alerts 6, then I have a new qusetion : why I click <div id="1">1</div>the i=6 instead of 1?

iplus26 Over a year ago

@nian I tried to make it clear in my answer. i will be increased to the length of divs array, which is 6, after the loop / adding all onclick events on 6 divs. So when you click on one of these elements, which is after the loop, i = 6 whichever element you clicked.

iplus26 Over a year ago

Sorry, my English may be poor and I wish I made myself understood.

nian Over a year ago

I get it ! Thank you!

Collectives™ on Stack Overflow

Using DOM to get element id's inside onclick

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related