如何使用Javascript获取具有类名的几个段落的值？

Question

我想p通过使用类名单击该 div 来获取包含在 div 中的段落 () 的文本。我尝试使用innerText，innerHTML但它undefined在控制台中返回。我怎样才能只使用 Javascript 来做到这一点？

HTML

<div class="showName">

   <p class="paragraphs">Text 1</p>

</div>

<div class="showName">

   <p class="paragraphs">Text 2</p>

</div>

<div class="showName">

   <p class="paragraphs">Text 3</p>

</div>

Javascript

const showName = document.getElementsByClassName('showName');

const paragraphs = document.getElementsByClassName('paragraphs');

Array.prototype.forEach.call(showName, function(element) {

   element.addEventListener('click', function() {

      // How can I do it here?

   });

});

Answer 1

工作示例：https&nbsp;://codepen.io/shinaBR2/pen/qBbxRgz 基本代码是Array.prototype.forEach.call(showName, function(element) {&nbsp; &nbsp;element.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; // How can I do it here?&nbsp; &nbsp; &nbsp;const text = element.querySelector('.paragraphs').textContent;&nbsp; &nbsp; &nbsp;alert(text);&nbsp; &nbsp;});});

Answer 2

如果您想在所有具有“ paragraphs”类的段落中获取文本，此代码还可以帮助您：HTML<div class="showName">&nbsp; &nbsp;<p class="paragraphs">Text 1</p></div><div class="showName">&nbsp; &nbsp;<p class="paragraphs">Text 2</p></div><div class="showName">&nbsp; &nbsp;<p class="paragraphs">Text 3</p></div>JAVASCRIPTconst showName = document.getElementsByClassName('showName');const paragraphs = document.getElementsByClassName('paragraphs');for(i=0; i < paragraphs.length; i++){&nbsp; &nbsp; console.log(paragraphs[i].innerText);}