HTML | DOM Output value Property

Last Updated : 01 Jun, 2022

The HTML DOM Output value Property is used to set or return the value of the Attribute of an <Output> Element. The value Attribute is used to specify the result of the calculation. Syntax:

It return the value property.

outputObject.value

It set the value property.

outputObject.value = result

Property value: It contains the value i.e. result which specify the result of the calculation. Return value: It returns a string value which represents the result of the calculation. Example 1: This Example returns a value Property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Output value Property
    </title>
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2> 
     HTML DOM Output value Property 
    </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:

Before Clicking On Button:
After Clicking On Button:

Example 2: This Example sets a value Property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Output value Property
    </title>
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2> 
     HTML DOM Output value Property 
    </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 =
            150;
            document.getElementById("sudo").innerHTML = 
              "The value was changed to  " + x;
        }
    </script>

</body>

</html>

Output:

Before Clicking On Button:
After Clicking On Button:

Supported Browsers: The browsers supported by HTML DOM Output value Property are listed below:

Google Chrome 10.0
Firefox 4.0
Opera 11.0
Safari 5.1

HTML DOM value Property

manaschhabra2

Improve

Article Tags :

HTML | DOM Output value Property

Similar Reads

Thank You!

What kind of Experience do you want to share?