HTML and CSS Reference
In-Depth Information
if (value > 100)
value = 100;
var progress = document.getElementById("FormProgress");
progress.value = value;
};
function bindEvents() {
var fieldList = document.getElementsByClassName("text-box single-line");
for (var i = 0; i < fieldList.length; i++) {
fieldList[i].addEventListener("change", calculateProgress, false);
}
}
</script>
</head>
<body
onload="bindEvents();"
>
■
in calculating the progress this code ignores the range control used for the
Satisfaction
field. This was
done because it always has a value and so you can't tell when a value was “entered”.
Note
Also, change the initial value property of the
progress
tag from 60 to 0 like this:
<progress id="FormProgress" value=
"0"
max="100">
Press F5 to debug the application. As you enter values in the input fields, notice that the progress bar is
automatically updated. To demonstrate how browser implementation varies, try this in Google Chrome. Notice
that the progress bar is animated with a lighter section moving horizontally through the part of the control that is
already filled in. Also, notice that it does not support vertical range controls as shown in Figure
3-21
.
Figure 3-21.
The progress and range controls in Chrome
