如何获取点击HTML元素的ID？div点击显示ID的代码实现咨询

你的需求很清晰，但现有代码的逻辑顺序和细节存在问题，我帮你修正并解释每一步：

首先，来看修正后的完整可运行代码：

<div id="div1">点击我（div1）</div>
<div id="div2">点击我（div2）</div>
<div id="displayid"></div>

<script>
// 提前获取用来显示ID的元素，避免每次点击重复查询DOM
const displayDiv = document.getElementById('displayid');
// 获取页面所有div元素
const allDivs = document.getElementsByTagName('div');

// 遍历每个div，绑定点击事件
for (let i = 0; i < allDivs.length; i++) {
  allDivs[i].addEventListener('click', function(e) {
    // 可选：阻止事件冒泡（如果你的div有嵌套元素时需要）
    e.stopPropagation();
    
    // 获取当前被点击div的ID
    const clickedId = this.id;
    
    // 可选：排除点击displayid本身的情况
    if (clickedId !== 'displayid') {
      // 将ID内容更新到显示容器中
      displayDiv.innerHTML = `你点击了ID为：${clickedId}的元素`;
    }
  });
}
</script>

原有代码的核心问题说明： #

• 逻辑顺序完全颠倒：你把循环放在了一个无效的if(clickedDivId = this.id)判断里，这个条件是赋值语句而非判断，且此时this根本不是被点击的元素，完全起不到作用。
• 显示代码位置错误：document.getElementById("displayid").innerHTML = ...写在事件监听外面，只会在页面加载时执行一次，此时还没有任何div被点击，自然无法显示正确的ID。
• 事件对象使用不规范：你依赖全局的event.stopPropagation()，正确做法是使用回调函数传入的e参数（即e.stopPropagation()），避免全局变量带来的潜在问题。
• 变量声明不合理：clickedDivId的声明位置错误，且用var会有变量提升的隐患，直接在回调内声明变量更安全。

额外优化方案：事件委托（更高效灵活） #

如果你的页面后续可能动态新增div元素，推荐使用事件委托——只给父容器绑定一次事件，就能处理所有子div的点击：

const displayDiv = document.getElementById('displayid');
// 选择包含所有目标div的父容器（这里用body，你可以换成更具体的父元素）
const parentContainer = document.body;

parentContainer.addEventListener('click', function(e) {
  // 确认点击的是div元素，且不是用来显示的displayid
  if (e.target.tagName === 'DIV' && e.target.id !== 'displayid') {
    displayDiv.innerHTML = `你点击了ID为：${e.target.id}的元素`;
  }
});

这种方式的优势是：后续新增的div无需重新绑定事件，性能更优，也更适合动态内容场景。

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