时间戳

首页 > 解决方案 > div的抓取id，通过模板字面量设置为数字

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

问题描述

有一个小问题，尝试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/对象数组编号来获取我的删除按钮。（并且仅删除数据库中的对象，如果其 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');
      });
    }

返回以下错误：

未捕获（承诺中）类型错误：无法读取 null 的属性“addEventListener”

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

标签： javascriptdomgetelementbyid

解决方案

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

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

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

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

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

只需使用这些设置，直到找到所需的内容。

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

推荐阅读