TypeScript : How to get paragraph text within div

Question

I want to get paragraph text within div when I click on div. I tried getElementsByTagName() but it doesn't work. Here is the code :

HTML :

<div class="tile" style="left:40px;top:55px;" (click)="getTextFromHiddenParagraph(event)">
    <p>{{this.terms[0].termName}}</p>
    <p hidden>{{this.terms[0].connectionName}}</p>
</div>

I would like to access content within hidden paragraph when I click on parent div.

Please help!

if you could edit your example, so it is more clear that would help you get a fast answer. — Elise Chant, Aug 19 '20 at 09:05

score 0 · Answer 1 · answered Aug 19 '20 at 09:24

0

You can try this:

<div (click)="getTextFromHiddenParagraph(div.textContent)" #div>
  <p>{{this.terms[0].termName}}</p>
  <p hidden>{{this.terms[0].connectionName}}</p>
</div>

answered Aug 19 '20 at 09:24

Elham Dabiri

435
2
9

score 0 · Answer 2 · answered Aug 19 '20 at 09:40

I used one of the properties of event.target function described on post : What properties can I use with event.target?. I just positioned hidden paragraph first and used typescript function :

getParagraphText(event)
  {
    var conn;
    conn=event.target.firstElementChild.innerHTML;
    console.log(conn);
  }

HTML call :

<div class="tile" style="left:40px;top:55px;" (click)=getParagraphText($event)" [class.ClickedTile]="isClickedtile1" id="{{this.terms[0].connectionName}}">
        <p hidden>{{this.terms[0].connectionName}}</p>
        <p>{{this.terms[0].termName}}</p>
    </div>

TypeScript : How to get paragraph text within div

2 Answers2