Question

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

然后，我想获取<i>元素的ID（这是对象中每个元素的数字），因此我可以获取该ID并使用它并传递给另一个函数，另一个js文件。（最终，我将使用此ID进行DELETE请求）。

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

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之后，用onclick组合未定义的原因会尝试返回我尝试/ className捕获的任何标签。

Answer 1

发生此错误是由于在将getElementsByClassName('deleteButton')附加到dom之前执行deleteButton，您可以像这样在调用.then之后使用displayLastTask方法：

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

您的onclick附加时间过早。具体来说，当您调用divs[i].onclick = function(e)时，您的div必须在DOM中。但是，当循环运行时，它们似乎不存在，因此未附加处理程序。

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

模板文字中的节点的getElementsByClassName（无效）-未定义错误

2 个答案: