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

【问题标题】：Can Anybody please explain to me why I am getting this Error? "Uncaught TypeError任何人都可以向我解释为什么我会收到此错误吗？ “未捕获的类型错误
【发布时间】：2021-06-10 23:28:23
【问题描述】：

任何人都可以向我解释为什么我会收到此错误吗？ “未捕获的类型错误：无法读取未定义的属性‘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-1; i++){ - 不要忘记数组的索引为零
下面更新了答案。一直是语法错误。

标签： javascript html

【解决方案1】：

不确定这部分是否重要：

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);
    });
});

【讨论】：

It also does not cause postbacks on each button, but the for-loop way does (Why?)：这里解释原因：JavaScript closure inside loops – simple practical example
All along there was a syntax error. 语法错误将导致代码根本无法运行，因为它由于语法错误而无法解析。但是给定的代码在语法上是正确的，“只是”逻辑是有缺陷的。
@t.niese 感谢 cmets 和链接！