Get first tag textcontent of li box with pure javascript

Question

I want to have the first tag of (name) of my li whenever the li box is being clicked. But currently my code will only display the tag that is clicked.

Here is link to jsfiddle https://jsfiddle.net/ehagk1d7/ because the exact same code doesn't seem to work in snippet.

    function test() {
        console.log(event.target.textContent);
    }

<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

So, your question is why it is working in js fiddle but not in snippet here? — palaѕн, May 20 '20 at 11:17
Can you give an example of what you would need exactly when clicking on the list ? — Ben, May 20 '20 at 11:19
When I click on the list I want to get the Naam, praktijknaam to work with in my javascript function. But I only get the Naam,praktijknaam whenever I click on that tag. — Captain, May 20 '20 at 11:22

Mark Baijens · Accepted Answer · 2020-05-20T14:07:27.717

You can use this as a parameter to add the element the handler is attached to. You can then use this parameter in the handler function. event.target will refer to the clicked element which propagates to the lijst element, not the element the handler is attached to. querySelector() will return the first matched element.

function test(el) {
  console.log(el.querySelector('p').textContent);
}

<li class="lijst" onclick="test(this)">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

Better would be to get rid of the inline event handler and define the event handler in javascript as in snippet below.

document.querySelectorAll('.lijst').forEach(el => { 
  el.addEventListener('click', function(){
    console.log(this.querySelector('p').textContent);
  });
});

<li class="lijst">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

<li class="lijst">
  <p>Naam, Nog een PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

I used your first solution. Thank you. The second one will only show the name of the very first li in my list. — Captain, May 20 '20 at 12:19
@Captain Glad the first one works for you. I updated the second one too so it works with multiple `.lijst` elements. Using inline event handlers is considered a bad practice therefore I recommend you use the 2nd option.https://stackoverflow.com/questions/15792498/is-it-bad-practice-to-use-inline-event-handlers-in-html — Mark Baijens, May 20 '20 at 14:09

Mister Jojo · Answer 2 · 2020-05-20T12:14:39.040

use firstElementChild

function test(el) {
  alert(el.firstElementChild.textContent );
}

<li class="lijst" onclick="test(this)">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

If you want to stay with event element use currentTarget which is always the origin "node" of your function

function test() {
    console.log(event.currentTarget.firstElementChild.textContent);
}

<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

Get first tag textcontent of li box with pure javascript

2 Answers2