Question

尝试将div设置为数字的div时遇到一个小问题，document.getElementById()。

您可以在下面看到，我正在遍历数据库中的一个对象并显示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');
      });
    }

哪个返回以下错误：

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

尝试了一些没有运气的变化。

Answer 1

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

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

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

如果由于某种原因必须在该元素的直接父项上选择一个父项，因为您要创建项目的父项不止一次，则只需记录以下内容：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，通过模板文字设置为数字

2 个答案: