任何人都可以向我解释为什么我会收到此错误？ “未捕获的类型错误

如何解决任何人都可以向我解释为什么我会收到此错误？ “未捕获的类型错误

谁能向我解释为什么我会收到这个错误？ “未捕获的类型错误：无法读取未定义的属性‘addEventListener’”。我正在尝试为每个图像添加一个删除按钮。

<!DOCTYPE html>
<html>
<head lang="en-us">
    <title>temp.html</title>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equv="X-UA-Compatible" content="IE=Edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="image">
    <img src="https://via.placeholder.com/150" alt="First">
    <button class="remove">X</button>
</div>
<div class="image">
    <img src="https://via.placeholder.com/150" alt="Second">
    <button class="remove">X</button>
</div>

<script>

var appButtons = document.querySelectorAll(".remove");
for(var i=0; appButtons.length; i++){
    appButtons[i].addEventListener("click",function(){
        var father = appButtons[i].parentElement;
        var grandfather = appButtons[i].parentElement.parentElement;
        grandfather.removeChild(father);
    });
}


</script>
</body>
</html>

解决方法

不确定这部分是否重要：

for(var i=0; appButtons.length; i++){

应该

for(var i=0; i < appButtons.length; i++){

下面的 forEach 示例有效。它也不会在每个按钮上导致回发，但 for 循环方式会。（为什么？）

FWIW：for 循环（上面）中的每个元素只是一个 object，但 forEach 循环（下面）中的每个元素都是一个 [object HTMLButtonElement]。

使用forEach。 Source。

var appButtons = document.querySelectorAll(".remove");

appButtons.forEach(function(item) {
    item.addEventListener("click",function() {
        var father = item.parentElement;
        var grandfather = item.parentElement.parentElement;
        grandfather.removeChild(father);
    });
});

任何人都可以向我解释为什么我会收到此错误？ “未捕获的类型错误

如何解决任何人都可以向我解释为什么我会收到此错误？ “未捕获的类型错误

解决方法

相关推荐