Skip to content
Related Articles

Related Articles

Improve Article

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>

    Output :
    Before Clicking On button:

    After Clicking On Button:

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

    • Chrome
    • Firefox
    • Safari 6.0
    • Opera

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :