HTML DOM Output Object
Last Updated :
21 Nov, 2022
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 >GeeksforGeeks</ 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 = "geeks" for = "A B C" >
</ output >
< br >
< br >
</ form >
< Button onclick = "myGeeks()" >Submit</ Button >
< h2 id = "sudo" ></ h2 >
< script >
function myGeeks() {
var x = document.getElementById("geeks").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;" >
GeeksForGeeks
</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...