Open In App

HTML | DOM Output value Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 01 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads