循环内的 addEventListener 未定义 div 元素答案

【问题标题】：Div element undefined for addEventListener inside loop循环内的 addEventListener 未定义 div 元素
【发布时间】：2021-06-22 23:32:51
【问题描述】：

这里是 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。

请人帮忙。

【问题讨论】：

标签： javascript dom addeventlistener

【解决方案1】：

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

【讨论】：

【解决方案2】：

你也可以 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>

【讨论】：

【解决方案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>

【讨论】：