Question

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

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

    console.log(text);
}

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

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

Answer 1

您正在阅读并打印仅第一段的值。但是，您需要读取所单击段落的文本值。

事件处理程序传递一个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>

Answer 2

document.getElementsByTagName('p')[0]说你想找到第一段，因此总会记录下第一段。我会通过将click事件绑定到父级，然后检查event.target是否为段落来解决此问题。通过委派活动，如果您稍后以编程方式添加更多段落，您也会获得正确的段落。

＆＃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;

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

2 个答案: