New Topic/Question
Reply
I am almost done with this assignment for class, we are to make a Javascript calculator using checkboxs for the operators and put the calculator in a table. When I run my code the calculations work ok for the most part, but once is start introducing zeros and text mixed with numerics for the operands i get funky answers in the answer box such as infinity. Also, even when the user enters two numerics in the operands, the error stating "you need to enter numerics into the text fields" still pop ups, and sometimes it pops up twice. I need help figuring out which part of my code is causing this errors and what I need to do to fix it.
Also, how do I alter my code so that when the user enters zero in operand B and is trying to divide, it will not do the math and give the user an error?
Instructors Directions:
(See attached image for appearance)
Create a Web page that uses Javascript to create the above application.
Use the document.write ( ) function to put the current date/time on the page as an <H5> which is centered on the page.
The check boxes will determine whether or not the particular math function is performed on the 2 operands. If the box is not checked, the answer box should appear blank.
If either Operand A or B is not numeric data, display an error message using the alert function and do not perform the calculations.
If zero is entered in Operand B, do not divide by zero, display a message, clear the divide checkbox, and put a zero in the answer.
My Calculator Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Assignment 10: Stephanie Hussar</title>
<script type="text/javascript">
function calculations() {
var userOpA = parseInt(validate(document.getElementById('operandA').value));
var userOpB = parseInt(validate(document.getElementById('operandB').value));
document.getElementById("answerOutput").value = addition(userOpA, userOpB);
document.getElementById("answerOutput").value = subtraction(userOpA, userOpB);
document.getElementById("answerOutput").value = multiplication(userOpA, userOpB);
document.getElementById("answerOutput").value = division(userOpA, userOpB);
}
function validate(value) {
if (value == null || value == "") {
alert("Error! Please enter a number in both operand text fields.");
return 0;
} else if (isNaN(value)) {
alert("Error! Please enter numerics only in the operand text fields!");
return 0;
}
else return value;
}
function addition(userOpA, userOpB){
return userOpA + userOpB;
}
function subtraction(userOpA, userOpB){
return userOpA - userOpB;
}
function multiplication(userOpA, userOpB){
return userOpA * userOpB;
}
function division(userOpA, userOpB){
return userOpA / userOpB;
}
</script>
</head>
<body>
<script type="text/javascript">
var today = new Date();
document.write("<h1><center> Stephanie's Javascript Calculator </h1></center>");
document.write("<h5><center>" + today.toLocaleString() +"</h5></center>");
</script>
<form name="Calculator" id="Calculator">
<center>
<table border="2">
<tr>
<td>Operand A</td>
<td><input id="operandA" type="text" name="operandA" /></td>
<td>Operand B</td>
<td><input id="operandB" type="text" name="operandB" /></td>
</tr>
<tr>
<td>Add<input type="checkbox" name="add" id="add" value="Add" onclick="addition()" /></td>
<td>Subtract<input type="checkbox" name="subtract" id="subtract" value="Subtract" onclick="subtraction()" /></td>
<td>Multiply<input type="checkbox" name="multiply" id="multiply" value="Multiply" onclick="multiplication()" /></td>
<td>Divide<input type="checkbox" name="divide" id="divide" value="Divide" onclick="divison()" /></td>
</tr>
<tr>
<td>Answer:<input type="text" id="answerOutput" name="answerOutput" /> </td>
</tr>
</table>
</center>
<br />
<center>
<input type="button" id="calculate" name="calculate" value="Calculate" onclick="calculations(); validate()" />
<input type="reset" id="clear" name="clear" value="Clear" />
</center>
</form>
</body>
</html>
MultiQuote
| 