javascript - 抓取div的id，通过模板文字设置为数字

Question

尝试 document.getElementById() 时遇到一个小问题，其中 ID 设置为数字。

您可以在下面看到，我正在循环访问数据库中的一个对象并显示 DOM 中的每个元素。然后我给每个 div 一个 id(这是一个数字 lastTask.id):

  function displayLastTask(lastTask) {
    console.log(lastTask);
    individualTasks +=
      `<div class="todoStyle">
        <p>Date: ${lastTask.date}: Task: ${lastTask.todo}</p>
        <p><button class="deleteButton" id=${lastTask.id}>Delete</button>
      </div>`;
    tasksContainer.innerHTML = individualTasks;
    return tasksContainer;
  }

我这样做是因为稍后我想通过 ID/对象数组编号来获取删除按钮。 (并且仅删除数据库中的对象(如果其 ID 匹配)。

无论如何，我的问题是，如果它是一个数字，我该如何执行 document.getElementById() ？ toString 不起作用。不确定这是否可行，如果 ID 是数字...

这就是我正在尝试的:

    for (var i = 0, len = res.length; i < len; i++) {
      lookup[res[i].id] = res[i];

      const id = toString(res[i].id);

      document.getElementById(id).addEventListener('click', function(event){
        event.preventDefault();
        console.log('clicked');
      });
    }

返回以下错误:

Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of null

尝试了一些变体，但没有成功。

Answer 1

您不应该为每个项目添加事件监听器。您可以通过事件冒泡来做到这一点。

只需将事件监听器添加到元素的父节点即可。例如。

document.querySelector('#parent').addEventListener('click', event => { 
    console.log(event.target.parentNode.id); 
})

如果由于某种原因您必须选择一个父元素而不是该元素的直接父元素，因为您多次创建项目的父元素，则只需记录以下内容:console.log(event.target) .parentNode.parentNode.id);.

如果它更高，您只需继续添加父节点即可。

只需尝试这些设置，直到找到所需的内容。

希望我的解释是可以理解的。