警告点击按钮/url的DIV内容

Question

嗨，我正在努力理解和学习javascript。我面临的挑战是如何提醒每个点击的内容。使用循环。

所以我开始挠头，尝试多种方法。我确实设法让内容警报，但不幸的是没有点击事件。

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

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

但是当我尝试使用onclick事件来触发点击按钮时的循环…

.

什么也没有发生我想添加一个带有特定id的按钮，并结合代码:

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

HTML按钮:

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

作为完成它的一种手段，但我没有得到任何错误或任何内容的警告。

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

关于如何让clickevent工作的任何提示?

任何帮助将非常感激!

Answer 1

如果你想点击每个"冒牌">

如果你想要得到一个列表，可以使用map

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>