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

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>