Find Text Value of closest first p using javascript-CodePudding

I have multiple columns like this

<div >
        <div >
            <h5 >નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div >
                <div >
                    <div >
                        <div >
                            <p >નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div >
                            <p >nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <h6 ><a  href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p ><small>1 day ago</small></p>
                </div>
                <div >
                    <span ><img src="https://stag.example.com/assets/images/copy.png"  alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png"  alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>

What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.

var copy = document.getElementsByClassName('copy');
            for (var i = 0; i < copy.length; i  ) {
              copy[i].addEventListener('click', function() {
                //get text   નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
        console.log("p tag value which is inside flip-card-front");
              });
            }

I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!

CodePudding user response：

regarding your structure

you search closest blog_content, from there search flip-card-front p:

copy[i].addEventListener('click', evt => {
   const el = evt.target.closest('.blog_content');
   const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});

not tested but should be ok

CodePudding user response：

You you need to do:

Navigate to the necessary node.
For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
Once you have parent, you can lookup any necessary element from it

var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i  ) {
  copy[i].addEventListener('click', function() {
    const content = this.closest('.blog_content')
    const cardFront = content.querySelector('.flip-card-front p')
    const text = cardFront.textContent;
    console.log(text)
  });
}

<div >
  <div >
    <h5 >નુતન વર્ષ 2023 ની શરૂઆત </h5>
    <div >
      <div >
        <div >
          <div >
            <p >નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
          </div>
          <div >
            <p >nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <h6 ><a  href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
        <p ><small>1 day ago</small></p>
      </div>
      <div >
        <span ><img src="https://stag.example.com/assets/images/copy.png"  alt="share quote" width="24" height="24"></span>
        <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png"  alt="share quote" width="24" height="24"></a>
      </div>
    </div>
  </div>
</div>