循环内addEventListener的Div元素未定义

Question

这是HTML和JS代码：

let sides = document.getElementsByClassName("sides");
for (var i=0;i<sides.length;i++){
console.log(sides[i].innerHTML);  // top left 
sides[i].addEventListener("click", function(){
console.log(sides[i]);  //Undefined
})
}

<div class="sides">top</div>
<div class="sides">left</div>

当我console.log(sides[i])时，我得到div元素，但当我添加addEventListener时，它显示undefined。

请有人帮忙。

Answer 1

将sides[i]更改为this，以便它可以引用单击的元素本身。解决方案不起作用的原因是，由于i++，变量i在最后一次迭代后增加到2。因此，当事件侦听器被触发时，sides[i]现在就是sides[2]。另一种方法是使用let作为let i = 0实例化i，然后可以访问sides[i]

<div class="sides">top</div>
<div class="sides">left</div>

<script>
let sides = document.getElementsByClassName("sides");
for (let i=0;i<sides.length;i++){
console.log(sides[i].innerHTML);  // top left 
sides[i].addEventListener("click", function(){
console.log(this);
console.log(sides[i])
})
}
</script>

Answer 2

您也可以控制台.loge.target

<div class="sides">Top</div>
<div class="sides">Left</div>
<script>
let sides = document.getElementsByClassName("sides");
for (let i=0;i<sides.length;i++){
console.log(sides[i].innerHTML);  // top left 
sides[i].addEventListener("click", function(e) {
console.log(e.target);
})
}
</script>

Answer 3

您也可以像下面这样为元素分配一个onclick()方法，但在函数内部，您仍然可以引用带有this的元素，以便console.log()知道您要打印哪个元素的innerHTML。在这种情况下，它是自己的。

let sides = document.getElementsByClassName("sides");
for (var i=0; i<sides.length; i++) {
console.log(sides[i].innerHTML);  // top left 
sides[i].onclick = function() {
console.log(this.innerHTML);  // Not undefined
};
}

<div class="sides">top</div>
<div class="sides">left</div>

或者，您也可以创建一个函数来处理点击事件，在这种情况下，您将再次使用this来引用点击的元素：

function someFunc() {
console.log(this.innerHTML);  // Not undefined
}
let sides = document.getElementsByClassName("sides");
for (var i=0; i<sides.length; i++) {
console.log(sides[i].innerHTML);  // top left 
sides[i].addEventListener("click", someFunc);
}

<div class="sides">top</div>
<div class="sides">left</div>