HTML | DOM li value Property

Last Updated : 29 Aug, 2022

The DOM Li value Property is used to set or return the value of the value attribute of a list item. The value attribute is used to set the value for the list items and the other list item will be increment form that numeric value. The value may be a number and alphabetical.

Syntax:

Return the value property.

liObject.value

It is used to set the value property.

liObject.value = number

Property Value: It contains a value i.e number which specify the value of the list item.

Return Value: It returns a numeric value which represents the value of the list item.

Example-1: This Example returns a value Property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
          DOM li value Property
      </title>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
          DOM Li value Property 
      </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG" 
            value="100">
              Geeks
          </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
          Submit
      </button>
    <p id="sudo"
           style="font-size:25px;
              color:green;">
      </p>
    <script>
        function myGeeks() {
            // return li value Property
            var g = 
                document.getElementById("GFG").value;
            document.getElementById(
              "sudo").innerHTML = g;
        }
    </script>
</body>
</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Example-2: This Example sets the value Property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
          DOM li value Property
      </title>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
          DOM Li value Property
      </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG"
            value="100">
              Geeks
          </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
          Submit
      </button>
    <p id="sudo" 
           style="font-size:25px;
              color:green;">
      </p>
    <script>
        function myGeeks() {
            // set li value Property
            var g = 
                document.getElementById(
                  "GFG").value = "200";
           
            document.getElementById(
              "sudo").innerHTML = 
              "The value was change form 100 to " + g;
        }
    </script>
</body>
</html>