addEventListener function 在 javascript 中不起作用

Question

我正在尝试检查 function 是否应该通过单击 console.log 来触发，但控制台消息从未出现

<script src="e-com.js" async></script>

这就是我在头部链接 js 文件的方式

<a href="" id="remove">Remove</a>

这是我想要活动的链接

let removeItem=document.getElementById("remove")
for (i=0; i<removeItem.length; i++){
let  remove = removeItem.addEventListener("click", function(){

  console.log("Clicked");
  })
}

这是js function

Answer 1

.getElementById() 不会返回一个数组，因为您不允许拥有多个具有单个 ID 的元素。

因此，for 循环失败了。

尝试

let removeItem=document.getElementById("remove")

removeItem.addEventListener("click", function(){

  console.log("Clicked");
})

Answer 2

问题似乎是您试图遍历getElementById()的结果，它不返回可迭代对象。

---

要修复它，您只需要删除循环。 下面的代码应该可以正常工作^{^} 。

 const removeItem = document.getElementById("remove"); removeItem.addEventListener("click", () => { console.log("Clicked;"); });

 <a href="" id="remove">Remove</a>

根据MDN Web 文档：

Document方法getElementById()返回一个Element object，表示其id属性与指定字符串匹配的元素。

正如它所述， getElementById()返回一个Element ，简而言之，它只是一个 object。 这就是为什么你不能迭代它。

---

如果你想用for循环监听多个对象，你需要做一些改变。

首先，您不能使用id ，因为id属性是唯一的，并且只能在 HTML 文档中使用一次。 因此，要获取多个元素，需要使用class属性。 请参阅下面使用的class属性的示例。

<div class="division">Division!</div>

class属性可由任何 HTML 元素使用。

因此，要获取所有类并对其进行迭代，您需要使用getElementsByClassName()方法或querySelectorAll()方法。

两者之间的唯一区别是getElementsByClassName()返回一个实时HTMLCollection ，而querySelectorAll()返回一个static HTMLCollection 。

如果您要使用querySelectorAll() ，您的代码将如下所示^{^} 。

 const removeItem = document.querySelectorAll("remove"); Array.from(removeItem).forEach((ele) => { ele.addEventListener("click", () => { console.log("Clicked;"); }); });

 <a href="" class="remove">Remove</a> <a href="" class="remove">Remove</a> <a href="" class="remove">Remove</a>

---

这两种解决方案都应该可以正常工作，但它们取决于您需要完成的工作。

---

^{^}代码略有修改。