JS动态渲染HTML列表点击时e.target.id为空无法获取对象值问题

问题根因 #

你在动态创建<li>列表项时，没有给元素设置id属性，也没有把对象的对应属性挂载到DOM元素上，所以点击时读取e.target.id返回空属于正常现象。

修复方案 #

我们可以用HTML5规范支持的data-*自定义属性来挂载数据，这种方式灵活度更高，也不会和原生DOM属性冲突：

1. 修改列表生成逻辑 #

给每个<li>添加自定义属性，存储对应对象的索引或者需要直接读取的属性：

for (let i = 0; i < listOfTierObjects.length; i++) {
  const currentItem = listOfTierObjects[i];
  document.getElementById("tiereList").innerHTML += `<li 
    data-index="${i}" 
    data-name="${currentItem.name}"
    data-id="${currentItem.idNummer}"
  >${currentItem.name}</li>`;
};

2. 修改点击事件逻辑 #

从点击目标的自定义属性中读取数据，也可以通过索引直接获取完整的原始对象：

document.getElementById("tiereList").onclick = function(e) {
  // 仅处理点击li元素的场景，避免点击列表空白区域误触发
  if (e.target.tagName === 'LI') {
    // 读取自定义属性
    const clickedName = e.target.dataset.name;
    const clickedId = e.target.dataset.id;
    // 通过索引直接获取完整对象，可读取所有属性
    const fullObj = listOfTierObjects[Number(e.target.dataset.index)];
    
    console.log('点击项的name值：', clickedName);
    console.log('点击项的完整对象：', fullObj);
  }
}

其他说明 #

如果一定要用id属性来取值，只需要在生成<li>时给标签添加id属性即可，注意id不能重复，建议用业务唯一的idNummer作为id值：

// 示例：给li加id属性
document.getElementById("tiereList").innerHTML += `<li id="${currentItem.idNummer}">${currentItem.name}</li>`;

内容的提问来源于stack exchange，提问作者Thomas Kupfer