how to get text from nested span when li is clicked, with simple javascript

Question

I don't get jQuery yet, so javascript please. I need help adjusting my JS so it gets text from a nested span inside an li when clicked. i have it working now if you click the text, but id like it to work if you click the entire li without it getting the other nested elements (the image).

right now im working with the following html and js:

HTML:

<ul><li><img><span onclick="myfunction(this)">TEXT</span></li></ul> 

<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />

JS:

function myfunction(span) {
    var textInsideLi = span.innerHTML;
    var field = document.getElementById("iSupervisorUserName");
    field.value = textInsideLi;

I would like the text from SPAN to be written to the input when the li is clicked, not just the span. I know I should move the onClick call from the span to the li, but how do I adjust the JS so it get only the text inside the span and not the IMG as well?

Answer 1

here you go

html

<ul><li onclick="myfunction(this)"><img><span>TEXT</span></li></ul>

js

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.getElementsByTagName('span')[0].textContent;
}

or

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.childNodes[1].textContent;
}

anyway i would add an eventlistener to the ul or the li's.. as inline js is a mess if you wanna update the code later.also there is alot more code generated if you add onclick="myfunction(this)" on each li.

Answer 2

You may get the inner <span> element with .getElementsByTagName() method:

HTML:

<ul><li onclick="myfunction(this);"><img><span>TEXT</span></li></ul>

JavaScript:

function myfunction(li) {
    var span = li.getElementsByTagName('span')[0],
        textInsideLi = span.textContent || span.innerText,
        field = document.getElementById('iSupervisorUserName');

    field.value = textInsideLi;
    // ...
}