CSC 105

Forms Lab

Part Three: Form Elements & Dynamic HTML

In this part of the lab, we will add a more interesting form script, to make a simple calculator. Although the scripting is slightly more complex, you should be able to follow the example closely.

To Do

Here's a simple form that does an arithmetic computation:



To make sure you understand what's going on here, try this: Modify the form above so that it has another button, Compute Product. When the Compute Product button is pressed, the product of the two numbers should be computed and put in the answer box. (Hint: copy the JavaScript for computeSum() and modify it to produce computeProduct(). Then copy the HTML that creates the Compute Sum button and modify it to make the Compute Product button.)

Extra Credit

Using onKeyPress events in the two input text boxes above, make it so that the sum and product displays below get updated whenever the inputs change. You will need to change the innerHTML property of the span tags below.

Sum is 0.

Product is 0.