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