Skip to content
Related Articles

Related Articles

HTML | DOM Meter value Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 23 Aug, 2022
Improve Article
Save Article

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. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
      HTML | DOM Meter value Property
      </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() {
 
            // return meter 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>
      HTML | DOM Meter value Property
      </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() {
 
            // set meter value property
            var g =
                document.getElementById("GFG").value = "45";
            
          document.getElementById("sudo").innerHTML =
              "The value was changed to " + g;
        }
    </script>
</body>
</html>

Output: 

Before Clicking On button:

  

After Clicking On Button:

  

Supported Browsers: The browser supported by DOM Meter value Property are listed below:

  • Chrome 6
  • Firefox 16
  • Edge 18
  • Safari 6
  • Opera 11

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!