我在标签之间进行排序时遇到问题

Question

我的项目：

我正在Yandex浏览器中做书签部分。

---

我的代码：

var book_mark_box = '<div id ="' + name + '" class = "col tab">' +
  '<a href ="' + addhttp(url) +
  '" target = "_blank" ' +
  'data-toggle="tooltip" ' +
  'title=' + name + '>' +
  '<div class="tab_image">' +
  '<i class="fas fa-times" title="remove"></i>' +
  '<img src=' + img + '></div>' +
  '</a>' +
  '</div>';
tabs.innerHTML += book_mark_box;

并且：

var times = document.getElementsByClassName("fas");
times.addEventListener("click",deleteDataImage);
function deleteDataImage(){
    // example code
    console.log("a")
}

这里的问题是：我无法通过“ fa-times”类按下按钮。我不能按“ a”，因为标签在前面。我知道。但是我仍然无法弄清楚。

  

错误：未捕获的TypeError：times.addEventListener不是函数

Answer 1

由于times是一个实时HTMLCollection（类似于数组），因此无法在其上添加事件监听器-对其进行迭代并在每个项目上添加事件监听器：

[...times].forEach(t => t.addEventListener("click", deleteDataImage));

如果只有一项：

var [times] = document.getElementsByClassName("fas");
times.addEventListener("click", deleteDataImage);

或者：

var times = document.querySelector(".fas");
times.addEventListener("click", deleteDataImage);