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>

---

這兩種解決方案都應該可以正常工作，但它們取決於您需要完成的工作。

---

^{^}代碼略有修改。