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>