Javascript 循环内addEventListener的Div元素未定义

以下是HTML和JS代码：

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


顶部
左边
让sides=document.getElementsByClassName（“sides”）；
对于（设i=0；i您还可以console.log
e.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>

顶部
左边
让sides=document.getElementsByClassName（“sides”）；
对于（设i=0；i您也可以像下面这样为元素分配一个
onclick（）
方法，但是在函数内部，您仍然可以使用
this
引用元素，以便
console.log（）
知道您正试图打印哪个元素的
innerHTML
。在这种情况下，它是自己的


let sides=document.getElementsByClassName（“sides”）；
对于（var i=0；i