Open a text editor and create a file with a .htm extension. This file will contain the markup (HTML) that defines the form and the form’s contents: two fields where the user enters numbers, a button to calculate a total based on the two numbers, and a total field that holds the total.
Add three input fields to the form. Name the first input field “box1,” name the second input field “box2” and name the third input field “total.” Box1 will hold the first number, box2 the second number, and the total will be placed in the total field. Give the input fields a size of 3 and a maximum length of 3.
Add the two variable values and update the total field with the result.
Open the .htm page in a browser. Type a number in box1, a number in box2, and click the button to add the numbers. The total will appear in the total field.
- Use the “value=0” option with box1 and box2 to give them an initial value of 0 when the page loads.
- Add some text before the total field to separate it from the other fields on the page.
- Try using the onChange() event on box1 and box2 to calculate the total as users enter values.
Items you will need
- Text editor
- Thinkstock/Comstock/Getty Images