如何通过简单的javascript点击li时从嵌套span获取文本

Question

我还没有得到jQuery,所以javascript请.我需要帮助调整我的JS,以便在单击时从li中的嵌套span获取文本.如果你单击文本,我现在有它工作,但如果你单击整个li而没有获得其他嵌套元素(图像),id就像它一样工作.

现在我正在使用以下html和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;

我希望在单击li时将SPAN中的文本写入输入,而不仅仅是跨度.我知道我应该从范围移动的onClick调用里,但如何调整JS所以它只能得到跨度内的文本,而不是IMG呢？

Answer 1

干得好

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;
}

或者

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

无论如何，我会向 ul 或 li 添加一个事件侦听器。因为如果您想稍后更新代码，内联 js 会很混乱。如果您onclick="myfunction(this)"在每个 li 上添加，还会生成更多代码。