HTML | DOM Meter value Property

Difficulty Level : Basic
Last Updated : 18 Apr, 2019

The DOM Meter value Property is used to set or return the value of the value attribute in a gauge. The value attribute is used to specify the current value of the gauge. The value should between the min and max attribute values.

Syntax:

It returns the value property.

meterObject.value

It is used to set the value property.

meterObject.value = number

Property Values: It contains the value i.e number which specifies a floating point number that represents the current value of the gauge.

Return Value: It returns a floating point number which represents the current value of the gauge.

Example: This Example returns a value Property.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM Meter Object
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Meter value Property:
  </h2> Sachin's score:
  
    <!-- assigning id to meter with 
        properties. -->
    <meter value="5"
           min="0"
           max="10">
        5 out of 10
    </meter>
  
    <br>Laxma score:
  
    <!-- meter tag using value property. -->
    <meter id="GFG" 
           min="0" 
           low="40"
           high="65" 
           max="100"
           value="55">
  </meter>
    <br>
  
    <button onclick="Geeks()">
        Submit
    </button>
  
    <p id="sudo" 
       style="font-size:25px;
              color:green;">
  </p>
  
    <script>
        function Geeks() {
  
            // Accessing 'meter' tag. 
            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.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM Meter Object
  </title>
</head>
  
<body>
    <h1>
      GeeksforGeeks
  </h1>
    <h2>
      DOM Meter value Property:
  </h2> Sachin's score:
  
    <!-- assigning id to meter with 
        properties. -->
    <meter value="5"
           min="0"
           max="10">
        5 out of 10
    </meter>
  
    <br>Laxma score:
  
    <!-- meter tag using value property. -->
    <meter id="GFG"
           min="0"
           low="40" 
           high="65" 
           max="100"
           value="55">
  </meter>
    <br>
  
    <button onclick="Geeks()">
        Submit
    </button>
  
    <p id="sudo"
       style="font-size:25px;
              color:green;">
  </p>
  
    <script>
        function Geeks() {
  
            // Accessing 'meter' tag. 
            var g =
                document.getElementById("GFG").value = "45";
             
          document.getElementById("sudo").innerHTML = 
              "The value was changed to " + g;
        }
    </script>
  
</body>
  
</html>