Java Reference
In-Depth Information
Using the <output/> element
trY it out
In this exercise, you modify Example 10 and use the
<output/>
element to display the
range
's value.
Feel free to copy and paste Example 10 and modify the highlighted lines of code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 11: Example 11</title>
</head>
<body>
<form id="form1" name="form1">
<p>
<label for="minValue">Min: </label>
<input type="number" id="minValue" name="minValue" />
</p>
<p>
<label for="maxValue">Max: </label>
<input type="number" id="maxValue" name="maxValue" />
</p>
<p>
<label for="stepValue">Step: </label>
<input type="number" id="stepValue" name="stepValue" />
</p>
<p>
<input type="range" id="slider" name="slider" />
</p>
</form>
<output id="result" name="result" form="form1" for="slider"></output>
<script>
var myForm = document.form1;
var output = myForm.result;
function formInputChange() {
var slider = myForm.slider;
slider.min = parseFloat(myForm.minValue.value);
slider.max = parseFloat(myForm.maxValue.value);
slider.step = parseFloat(myForm.stepValue.value);
result.value = slider.value;
}
myForm.addEventListener("input", formInputChange);
</script>
</body>
</html>
Save this as
ch11 _ example11.html
.
Because you're using standard
<output/>
code, you will need to open this page in Chrome, Firefox, or
Opera.
