我有10个段落,每个段落显示1到10之间的数字。我需要一个函数,当点击段落时,读取它的描述并将其存储在数组中。到目前为止,我设法做到了这一点:
function readValue(p) {
var text = document.getElementsByTagName('p')[0].innerHTML;
console.log(text);
}
但是当我点击第5段时,它仍会将1
记录到控制台。
如何更改以获取实际点击的段落内容?
答案 0 :(得分:4)
您正在阅读并打印仅第一段的值。但是,您需要读取所单击段落的文本值。
事件处理程序传递一个Event
对象,该对象具有target
属性,该对象包含对生成该事件的元素的引用。
let para = document.getElementsByTagName("p");
[...para].forEach(elem => elem.addEventListener('click', readValue));
function readValue(e) {
let text = e.target.textContent;
console.log(text);
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
答案 1 :(得分:1)
document.getElementsByTagName('p')[0]
说你想找到第一段,因此总会记录下第一段。我会通过将click
事件绑定到父级,然后检查event.target
是否为段落来解决此问题。
通过委派活动,如果您稍后以编程方式添加更多段落,您也会获得正确的段落。
document.querySelector('#content').addEventListener('click', function(event){
if(event.target.nodeName === 'P'){
console.log(event.target.innerHTML)
}
})
&#13;
<div id="content">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
</div>
&#13;