CIT041J Index > Experiment - Forms

CIT041J Experiment - Forms

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:

form with 7 and 5 as numbers

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:

form with 7 and 5 as numbers

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>