HTML DOM Output Object
The HTML DOM Output Object is used to represent the HTML <Output> Tag . The output element is accessed by getElementById().
Syntax:
document.getElementById("id");
Where “id” is the ID assigned to the “output ” tag.
Values:
- default Value: It is used to set or return the default value of the <output> element.
- form: It returns a reference to the form that the <output> element belongs to.
- htmlFor: It is used to return the value of for the attribute of the <output> element.
- labels: It is used to return the list of label elements associated with <output> element.
- name: It is used to set or return the value of the name attribute of an <output> element.
- type: It returns which type of HTML element the Output object represents.
- value: It is used to set or returns the value of the value attribute of the <output> element.
Example 1: Below HTML code returns the value of the output element. By using the getElementById() method to access the Output tag.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Output Object </ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > HTML DOM Output Object </ h2 > < form oninput=" sumresult.value = parseInt (A.value) + parseInt(B.value) + parseInt(C.value)"> < input type = "number" name = "A" value = "50" /> + < input type = "range" name = "B" value = "0" /> + < input type = "number" name = "C" value = "50" /> < br /> Submit Result: < output name = "sumresult" id = "Beginner" for = "A B C" > </ output > < br > < br > </ form > < Button onclick = "myBeginner()" >Submit</ Button > < h2 id = "sudo" ></ h2 > < script > function myBeginner() { var x = document.getElementById("Beginner").value; document.getElementById("sudo").innerHTML = x; } </ script > </ body > </ html > |
Output:
Example 2: Output Object can be created by using the document.createElement method.
HTML
<!DOCTYPE html> < html > < body > < center > < h2 style = "color: green;" > w3wiki </ h2 > < h2 style = "color: green;" > HTML DOM Output Object </ h2 > < p > Click the Below button to create an OUTPUT element. </ p > < form id = "GFG" oninput = "x.value=parseInt(a.value)+parseInt(b.value)" >0 < input type = "range" id = "a" value = "50" >100 +< input type = "number" id = "b" value = "50" >= </ form > < br > < button onclick = "Create()" >Try it</ button > < p id = "sudo" ></ p > </ center > < script > function Create() { // Create an output tag var x = document.createElement("OUTPUT"); x.setAttribute("name", "x"); // Set name attribute x.setAttribute("for", "a b"); // Set firm attribute document.getElementById("GFG").appendChild(x); document.getElementById("sudo").innerHTML = `The output element was created. You can Change the value of the range or number field to see the result of a calculation.`; } </ script > </ body > </ html > |
Output:
List of Supported Browsers given below:
- Google Chrome 10.0
- Edge 18.0
- Firefox 4.0
- Opera 11.0
- Safari 7.0