HTML | DOM Progress max Property

Last Updated : 15 Jul, 2022

The DOM Progress max Property is used to set or return the value of the max attribute of an <progress> element. The max attribute represents the total work is to be done for completing a task.

Syntax:

It is used to return the progress max property.

progressObject.max

It is used to set the progress max property.

progressObject.max = number

Property Value:

number: It specifies the amount of work already competed in terms of numeric value.

Return Value: It returns a floating point number which represents how much amount of work required to accomplish a task.

Example-1: This example illustrates how to set the progress max property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Progress max Property
    </title>
</head>

<body>
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>

    <h2>DOM Progress max Property </h2> 
     Downloading progress for a song:
    <progress id="GFG" value="30" max="100">
    </progress>

    <br>
    <br>

    <button onclick="myGeeks()">
        Submit
    </button>

    <script>
        function myGeeks() {
            var pr = document.getElementById("GFG").max = "60";
        }
    </script>
</body>

</html>

Output:
Before Clicking On Button :

After Clicking On Button:

Example-2 : This example illustrates how to return the progress max property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Progress max Property
    </title>
</head>

<body>
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>

    <h2>DOM Progress max Property </h2> 
     Downloading progress for a song:
    <progress id="GFG" value="57" max="100">
    </progress>

    <br>
    <br>

    <button onclick="myGeeks()">
        Submit
    </button>

    <p id="sudo"></p>



    <script>
        function myGeeks() {
            var pr =
            document.getElementById("GFG").max;
          
            document.getElementById("sudo").innerHTML = 
              pr;
        }
    </script>
</body>

</html>

Output :
Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by DOM Progress max Property are listed below:

Google Chrome 6
Edge 12
Internet Explorer 10
Firefox 6
Opera 11
Safari 6

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML | DOM Window frameElement Properties

HTML DOM Window frameElement property returns the iframe element in which the window is embedded or stored. If it is not stored, in that case, it simply returns a null value. Syntax: window.frameElement Return Value: It returns an IFrame object or null. Example: html <!DOCTYPE html> <html

HTML | DOM Style columnRuleStyle Property

The DOM style columnRuleStyle Property in HTML is used to define or determine the style of rule between columns. Syntax : To set the property: object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid| double|groove|ridge|inset|outset|initial|inherit" To return the property: object.style.colum

HTML | DOM Style columnRuleWidth Property

The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns. Syntax: It returns the columnRuleWidth property.object.style.columnRuleWidthIt is used to set columnRuleWidth property.object.style.columnRuleWidth = "medium|thin|thick|length| in

HTML DOM adoptNode() Method

This DOM adoptNode() method is used to adopt a node from another document. All node types can be adopted. All child nodes along with the original node can be adopted. AdoptNode() method is used to return node objects.Syntax: document.adoptNode(node)Parameter Value: DOM adoptNode() method contains on

HTML | DOM Style zIndex Property

The Style zIndex property is used for set or return the stack order of a positioned element. The element which has a lower stack order will be behind of another element with higher stack order. For example, the element with stack order(1) will be in front of the element with stack order(0). The Styl

HTML | DOM Input Password Object

The Input Password Object in HTML DOM is used to represent an HTML input element with type="password". The input element with type="password" can be accessed by using getElementById() method. Syntax: It is used to access input type="password"document.getElementById("id");It is used to create type="p

HTML | DOM Column Object

The Column Object in HTML DOM is used to represent the HTML <col> element. This tag is used to set or get the properties of <col> element. It can be accessed by using getElementById() method.Syntax: document.getElementById("Col_ID"); This Col_ID is assigned to HTML < col > element.

HTML | DOM Input Hidden Object

The Input Hidden object in HTML DOM represents the <input> element with type = â€œhiddenâ€ attribute. The element can be accessed by using getElementById() method.Syntax: document.getElementById("id"); where id is assigned to the <input> tag.Property Values: defaultvalue: It is used to set

HTML | DOM Input Time Object

The Input Time object in HTML DOM represents an <input> element with type = "time" attribute. The time attribute can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the referen

HTML DOM Geolocation coordinates Property

The DOM Geolocation coordinates Property in HTML is used to return the position and altitude of the device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Property Values: ValuesDescriptioncoordinates.latitude