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>