点击按钮/网址上的 Javascript 警报 DIV 内容

Question

您好，我正在尝试理解和学习 Javascripting。 我面临的挑战是要找出如何提醒每个单独的 onclick 内容。 使用循环。

所以我开始摸索，尝试多种方法。 我确实设法让内容得到提醒，但不幸的是没有点击事件。

function raport()
document.querySelectorAll(".fake").forEach(div=>{
text+=div.textContent;
});
alert(text);
}

使用查询选择器搜索类名 .fake 后跟 div=>text.div.textcontent 将变量 text = 设置为 div 的内容。 加载页面后，浏览器成功提醒 html 页面上的 div 内容。

但是当我尝试使用 onclick 事件在单击按钮时触发循环时..

什么都没有发生..

我想添加一个带有特定 id 和代码的按钮：

document.getElementById('demo').onclick = function() {raport()}

HTML 按钮：

<button id= "demo" onclick="raport()">Klik</button>

作为完成它的一种方式，但我没有收到任何错误或内容警报。

我也猜想这不是完成挑战的最有效方式。 因为我应该提醒每个人 这意味着我将复制具有唯一按钮 ID 和 div 类的代码以获得正确的结果。

关于如何让 clickevent 正常工作的任何提示？

任何帮助将不胜感激！

Answer 1

如果你想点击每个“假”，我总是建议委托

如果你想得到一份东西清单，还有一张地图

window.addEventListener("load", function() { // when the page loads
  const res = document.getElementById("res");
  const fakes = document.querySelectorAll("#demo .fake");
  document.getElementById("demo").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("fake")) {
      res.textContent = tgt.textContent;
    }
  });
  document.getElementById("klik").addEventListener("click", function() { 
    res.innerHTML = [...fakes] // cast the html collection to an array
      .map(fake => fake.textContent) // map the content
      .join(","); 
      
  })
});

<div id="demo">
  <div class='fake'>Hello</div>
  <div class='fake'>Man</div>
</div>
<button type="button" id="klik">Klik</button>
<hr/>
<div id="res"></div>

Answer 2

只是作为演示然后关闭问题，这是一个拼写错误：

let text ='';
function raport() {
  text = ''; // add this if you want clean variable everytime click, or just declare into function the variable
  document.querySelectorAll(".fake").forEach(div => {
    text += div.textContent;
  });
  alert(text);
}

document.getElementById('demo').onclick = function() {
  raport()
}

<button id="demo" onclick="raport()">Klik</button>
<div class='fake'>Hello</div>
<div class='fake'>Man</div>

---

您的评论示例：

document.querySelectorAll('.fake').forEach(el =>{
  el.addEventListener('click', () =>{
    alert(el.textContent);
  });
});

<div class='fake'>Hello</div>
<div class='fake'>Man</div>
<div class='fake'>test2</div>