how to get value of li tag which is in ul tag using getElementById

Question

In this code I am getting in alert 0 insteadof '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);
}

Answer 1

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

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 id="repoFolder" data-value="abc">Lazy Node</li>

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

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> 

Answer 2

Try using 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> 

Answer 3

1. You only have to replace the line

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

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

Answer 4

添加以下行：

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