Javascript div的抓取id，通过模板文本设置为一个数字

有一个小问题，试图

document.getElementById（）

，将ID设置为数字的div

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

lastTask.id

）：

返回以下错误：

未捕获（承诺中）TypeError:无法读取null的属性“addEventListener”

---

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

您不应该在每个项目中添加事件侦听器。 您可以通过事件冒泡来实现这一点

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

如果由于某种原因，您必须选择该元素的直接父级，而不是该元素的直接父级，因为您要多次创建项的父级，则只需记录以下内容：

console.log（event.target.parentNode.parentNode.id）

如果它更高，只需继续添加parentNodes

只需玩转这些设置，直到你找到你想要的

希望我的解释可以理解。
您需要将id用“”包装：

函数显示lastTask（lastTask）{
console.log（lastTask）；
个人任务+=
`
日期：${lastTask.Date}：任务：${lastTask.todo}

删除
`;
tasksContainer.innerHTML=单个任务；
返回任务容器；
}
当您
console.log（id）
（尝试获取元素之前）显示什么？您是否尝试过执行
document.getElementById（res[i].id）.addEventListener…
？
toString
函数不是一个独立的函数，如果您想调用它，可以将其称为
const id=res[i].id.toString（）如果您支持较旧的浏览器，可能最好使用字符串前缀。@CalvinNunes-我得到id，但作为一个数字。这里有一个控制台日志。。。。id 1调用这些代码的顺序是什么？如果
addEventListener
发生在
displayLastTask
之前，则对象还不存在。在这种情况下，返回
null
。我签入了最新的chrome并且
可以被
document.getElementById（42）
或
document.getElementById（'42'）
抓取。
  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;
  }

    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');
      });
    }

document.querySelector('#parent').addEventListener('click', event => { 
    console.log(event.target.parentNode.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;
  }