Assignment 10 - Javascript Simple Calculator (PL's note js pages 16 to 27)

LABAR Project 10

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to write your first javascript to declare, assign and display three variables of the string, number, and boolean types respectively.

In this assignment, Assignment #10, you are to create a simple calculator as in the HTML Form below. This calculator can:

• add, substract, multiply, and divide the two numbers entered;
• after the math operator button is pressed, the result shall be placed inside the Answer field;
• after the Clear, "C" button is pressed, all fields shall be cleared.

Enter a number:
Enter a number:

Answer =

The above html form code is listed below:

<FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="+" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="-" name="AddButton" onClick="CalculateSub(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="*" name="AddButton" onClick="CalculateMul(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="/" name="AddButton" onClick="CalculateDiv(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="C" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

---

Sample Code:

Javascript Adder

 <SCRIPT type="text/javascript"> function CalculateSum(Atext, Btext, form){ var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A + B; } function ClearForm(form){ form.input_A.value = ""; form.input_B.value = ""; form.Answer.value = ""; } </SCRIPT> <P><FONT SIZE="+2">Simple Adder</FONT></P> <FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

Try this adder out!

Simple Adder

Enter a number:
Enter a number:


Answer =