[英]How to get DOM element id with OnClick inside map fuction in ReactJs
[英]Using DOM to get element id's inside onclick
我正在尝试访问由getElementsByTagName
提取的元素的id,但是我收到一个错误:
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>
错误是:
未捕获的TypeError:无法读取未定义的属性“id”
当我改变
alert(divs[i].id);
至
alert(this.id);
它有效,但我不明白为什么会这样。
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
作用是因为:
向元素添加onclick
后,如果单击元素,则元素将调用该函数。
在循环之后, i
将增加到divs
数组的长度(即6)。 当单击该元素并调用该函数时, divs[6]
未定义,并且您无法获得未定义的id,而该函数可以理解this
指向被单击的元素并且它将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.