用纯javascript获取li框的第一个标签textcontent

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>

Answer 1

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>

Answer 2

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>