如何获取点击的段落的内容?

时间:2018-04-15 12:25:03

标签: javascript html events onclick

我有10个段落,每个段落显示1到10之间的数字。我需要一个函数,当点击段落时,读取它的描述并将其存储在数组中。到目前为止,我设法做到了这一点:

function readValue(p) {
    var text = document.getElementsByTagName('p')[0].innerHTML;

    console.log(text);
}

但是当我点击第5段时,它仍会将1记录到控制台。

如何更改以获取实际点击的段落内容?

2 个答案:

答案 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是否为段落来解决此问题。 通过委派活动,如果您稍后以编程方式添加更多段落,您也会获得正确的段落。

&#13;
&#13;
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;
&#13;
&#13;