Web Programming with HTML5, CSS, and JavaScript

9.15 Water Balloons Web Page

In the previous section, we showed you a code fragment that used prompt dialogs to get input for the number of water balloons and the diameter of those balloons. In this section, we examine a complete web page that gets those input values using text controls. See the Water Balloons web page in FIGURE 9.18. When the user clicks the Calculate water button, the button’s event handler reads the user’s input from the text controls, calculates the gallons of water needed to fill up the balloons, and displays the calculated gallons below the button. The event handler uses arithmetic operators, a Math method, parseInt, and parseFloat.

FIGURE 9.18 Water Balloons web page using text controls for the input

body Container ...