getElementsByClassName( 的模板文本中的节点不起作用.. - 未定义的错误

Question

我有一个通过GET请求检索的数据对象，然后我循环访问并显示在DOM中。

然后，我想获取<i>元素的 ID(这是对象中每个元素的数字(，这样我就可以获取此 ID 并使用它并传递到另一个函数中，在另一个 js 文件中。 (最终，我将将此 ID 用于删除请求(。

问题是，我在i标签上运行getElementsByClassName，出现以下错误：

TypeError: Cannot set property 'onclick' of undefined

当我的数据注入 DOM 时，我可以通过控制台看到 DOM 中的所有 HTML 标记/内容。 但是，这几乎就像JavaScript加载得太快一样。

我已经尝试setTimeOut()功能来绕过它。 Window.onload = {}并将我的函数放在这里。 甚至addEventListener.

但是，无论我尝试什么，错误仍然会出现....

有什么想法吗？

以下是我的代码片段：

  function displayLastTask(res) {
    const lastTask = (res[Object.keys(res).length-1]);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(
          individualTasks +=
            `<div class="todoStyle">
                <div class="text">
                  <p>Date: ${lastTask.date}</p>
                  <p>Task: ${lastTask.todo}</p>
              </div>
              <div class-"icon">
                  <i class="far fa-calendar-times deleteButton" id=${lastTask.id}></i>
              </div>
            </div>`
        );
        tasksContainer.innerHTML = individualTasks;
        return tasksContainer;
      }, 2000);
    });
  }

这是简单的JS，我试图通过以下方式获取ID：

var divs = document.getElementsByClassName('deleteButton');
for (var i = 0; i <= divs.length; i += 1) {
  divs[i].onclick = function(e) {
    e.preventDefault();
    alert(this.id);
  };
}

关闭控制台中的错误后。并将上面的代码复制并粘贴到控制台中，它可以工作...

我无法弄清楚，为什么在发出 GET 请求并将我的数据发布到 DOM 之后，我尝试抓取的任何标签/className 都会使用 onclick 组合返回未定义。

Answer 1

发生此错误是因为在将deleteButton附加到 dom 之前执行getElementsByClassName('deleteButton')，您可以在调用displayLastTask后使用.then方法，如下所示：

displayLastTask(res).then(() => {
  var divs = document.getElementsByClassName('deleteButton');
  for (var i = 0; i <= divs.length; i += 1) {
    divs[i].onclick = function(e) {
      e.preventDefault();
      alert(this.id);
    };
  }
});

Answer 2

您的点击附加得太早了。具体来说，当您调用divs[i].onclick = function(e)时，您的div需要在DOM中。但是，当该循环运行时，它们似乎不存在，因此不会附加处理程序。

您需要在 GET 请求完成后附加 onclick 处理程序。