In this experiment, you will make a “math box.” The user enters two numbers (which can have decimal points) into the first two fields of a form, as shown in this screenshot:
When the user clicks the Calculate button, a JavaScript
function that you write will fill in the sum, difference, product,
quotient, and “mod” of the two numbers, as shown in this
screenshot:
Here is the HTML file you should start with, or you may copy and paste the following code into a file of your own.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Math Box</title> <script type="text/javascript"> // <![CDATA[ /************************************************** Read the input fields, do the various calculations, and store the results in the appropriate fields of the form. ***************************************************/ // ]]> </script> </head> <body> <h2>Math Box</h2> <p> Enter numbers in the input fields below. When you click the "Calculate" button, you will see the results of various calculations on those numbers. </p> <!-- add name="" attributes to the opening form tag and also to the input fields in the form --> <form action="#"> <table border="1"> <tr> <td align="right">First number:</td> <td> <input type="text" /> </td> <td rowspan="2"> <!-- add an onclick="" to the button --> <input type="button" value="Calculate" /> </td> </tr> <tr> <td align="right">Second number:</td> <td> <input type="text" /> </td> </tr> </table> <!-- new table for results All the <input> elements must have names --> <table border="1"> <tr> <td align="right">Sum:</td> <td> <input type="text" size="10" /> </td> <td align="right">Difference:</td> <td> <input type="text" size = "10"/> </td> </tr> <tr> <td align="right">Product:</td> <td> <input type="text" size="10" /> </td> <td align="right">Quotient:</td> <td> <input type="text" size="10" /> </td> </tr> <tr> <td align="right">Modulo:</td> <td> <input type="text" size="10" /> </td> <td colspan="2"> <br /> </td> </tr> </table> </form> </body> </html>