JavaScript点击按钮触发循环获取对应div内容并alert的问题求助

1. 点击事件无响应修复 #

现有代码存在3个问题导致点击无响应：

• 函数语法错误：raport函数定义首行缺少左大括号{，语法错误导致函数未正常注册
• 变量未初始化：text变量未提前声明赋值为空字符串，直接执行+=操作会触发隐式报错
• 事件重复绑定：同时使用行内onclick属性与JS赋值onclick绑定同一事件，存在冗余冲突风险

修复后可正常运行的代码如下：

// 补全函数大括号，初始化text变量
function raport() {
  let text = ''
  document.querySelectorAll(".fake").forEach(div => {
    text += div.textContent
  })
  alert(text)
}

// 删除HTML按钮的行内onclick属性，仅保留JS绑定即可
document.getElementById('demo').onclick = raport

对应简化后的HTML按钮代码：

<button id="demo">Klik</button>

2. 单个div对应弹窗的高效实现 #

无需设置唯一标识，根据使用场景选择对应方案即可：

场景A：点击div本身弹出自身内容 #

直接为所有.fake元素绑定点击事件，回调内取当前触发事件的元素内容即可：

document.querySelectorAll('.fake').forEach(div => {
  div.addEventListener('click', function() {
    alert(this.textContent)
  })
})

场景B：点击按钮弹出对应相邻div内容 #

采用事件委托方案，仅绑定一次事件即可适配所有新增的div与按钮，无需额外修改JS代码：

示例HTML结构

<div class="fake">第一块内容</div>
<button class="pop-btn">弹出对应内容</button>
<div class="fake">第二块内容</div>
<button class="pop-btn">弹出对应内容</button>

JS实现代码

// 给公共父容器绑定事件（可替换为你实际的父容器选择器）
document.body.addEventListener('click', e => {
  if(e.target.classList.contains('pop-btn')) {
    // 取按钮相邻的.fake元素内容
    const relateDiv = e.target.previousElementSibling
    if(relateDiv?.classList.contains('fake')) {
      alert(relateDiv.textContent)
    }
  }
})

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