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