div的抓取id，通过模板字面量设置为数字

Question

尝试 document.getElementById() 的 div 时遇到一个小问题，其中 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/object 数组编号来获取我的删除按钮。（并且只删除数据库中的一个对象，如果它的 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');
      });
    }

其中returns出现以下错误：

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

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

Answer 1

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

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

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

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

如果再往上一点，就继续添加parentNodes。

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

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

Answer 2

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

div的抓取id，通过模板字面量设置为数字

Grab id of div, which is set as a number through template literal

javascript

dom

getelementbyid