如何使用getElementById获取ul标签中的li标签的值

In this code I am getting in alert 0 insteadof 'abc'

在这段代码中我得到警告0而不是'abc'

<ul>
    <li>First Node</li>
    <li id="repoFolder" value="abc">Lazy Node</li>
</ul>
<button onclick="rootFolder()">Click Me</button>

JS:

function rootFolder() {
    alert(document.getElementById("repoFolder").value);
}

4 个解决方案

#1

You need to read attribute value, since HTMLLiElement doesn't have value property:

您需要读取属性值,因为HTMLLiElement没有value属性:

document.getElementById("repoFolder").getAttribute("value");

And since value attribute is not defined in the specification for li tag, it's better to use data-attribute (with .getAttribute("data-value")):

由于在li标签的规范中没有定义value属性,因此最好使用data-attribute(使用.getAttribute(“data-value”)):

<li id="repoFolder" data-value="abc">Lazy Node</li>

Then HTML will be valid and IDE's won't complain about unknown attributes.

那么HTML将是有效的,IDE将不会抱怨未知属性。

Check the demo below.

查看下面的演示。

function rootFolder() {
    alert(document.getElementById("repoFolder").getAttribute('data-value'));
}

<ul>
    <li>First Node</li>
    <li id="repoFolder" data-value="abc">Lazy Node</li>
</ul>
<button onclick="rootFolder()">Click Me</button>

#2

Try using getAttribute():

尝试使用getAttribute():

function rootFolder() {
  alert(document.getElementById("repoFolder").getAttribute('value'));
}

<ul>
  <li>First Node</li>
  <li id="repoFolder" value="abc">Lazy Node</li>
</ul>
<button onclick="rootFolder()">Click Me</button>

#3

You only have to replace the line

您只需要更换线路

alert(document.getElementById("repoFolder").value); with

alert(document.getElementById("repoFolder").getAttribute('value'));

#4

Add the following line:

添加以下行:

alert(document.getElementById("repoFolder").getAttribute('value'));

#1