HTML | DOM Progress Object
The Progress Object in HTML DOM is used to represent the HTML <progress> element. The <progress> element can be accessed by using getElementById() method.
Property Values:
Syntax:
document.getElementById("ID");
Where ID is assigned to the <progress> element.
Example 1:
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Progress Object </ title > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >DOM Progress Object</ h2 > Downloading progress for a song: < progress id = "GFG" value = "57" max = "100" > </ progress > < br >< br > < button onclick = "myBeginner()" > Submit </ button > < p id = "sudo" ></ p > < script > function myBeginner() { var pr = document.getElementById("GFG").value; document.getElementById("sudo").innerHTML = pr; } </ script > </ body > </ html > |
Output:
Before Click on the Button:
After Click on the Button:
Example 2: Progress Object can be created by using the document.createElement Method.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Progress Object </ title > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >DOM Progress Object</ h2 > < P id = "GFG" > Downloading progress for a song: </ p > < button onclick = "myBeginner()" > Submit </ button > < script > function myBeginner() { var g = document.createElement("PROGRESS"); g.setAttribute("value", "57"); g.setAttribute("max", "100"); document.getElementById("GFG").appendChild(g); } </ script > </ body > </ html > |
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Progress Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari