Calculator Help

M

mwh

Hi. If you remember, I posted Expressons Help. Now I am making a
calculator with javascript. I can't get this to work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Calculator</title>
<script language="Javascript">
<!-- Begin Hiding
var total = 0
var operator = 0
function calculate(number){
firm = document.form.value1
firm.value = firm.value + number
}
function operator(opvalue){
theoperator = opvalue
total = document.form.value1.value
document.form.sup.value = ""
}
function equals(){
currentDspvalue = eval(document.form.value1.value)
previousDspvalue = eval(total)
// add
if (theoperator == "+"){
answer = currentDspvalue + previousDspvalue
}
// divide
else if (theoperator == "/"){
answer = currentDspvalue / previousDspvalue
}
// multilply
else if (theoperator == "*"){
answer = currentDspvalue * previousDspvalue
}
// subtract
else if (theoperator == "-"){
answer = currentDspvalue - previousDspvalue
}
document.form.sup.value = answer
}
// -->
</script>
<body bgcolor="blue">
<form name="form">
<input name="value1" length=15 type="text"><br>
<input name="1" type="button" value="1" onClick="calculate(1)">
<input name="2" type="button" value="2" onClick="calculate(2)">
<input name="3" type="button" value="3" onClick="calculate(3)">
<input name="4" type="button" value="4" onClick="calculate(4)">
<input name="5" type="button" value="5" onClick="calculate(5)">
<input name="6" type="button" value="6" onClick="calculate(6)">
<input name="7" type="button" value="7" onClick="calculate(7)">
<input name="8" type="button" value="8" onClick="calculate(8)">
<input name="9" type="button" value="9" onClick="calculate(9)">
<input name="0" type="button" value="0" onClick="calculate(0)">
<input name="decimal" type="button" value=" . " onClick=calculate(".")>
<input name="plus" type="button" value="Plus" onClick =operator("+")>
<input name="minus" type="button" value="minus" onClick =operator("-")>
<input name="multiply" type="button" value="times" onClick
=operator("*")>
<input name="divide" type="button" value="divided by" onClick
=operator("/")>
<input name="equals" type="button" value=" = " onClick = "equals()">
<input name="reset" type="reset" value="clear">
</form>
</body>
</html>

It works fine until I press the equal button. Instead of displaying the
answer in the text area, It just says "Error on Page" in the status
bar.

Can Anyone help?
(____)
(\/)
/-------\/
/ | MWH ||
- ||----||
 
R

RobG

mwh said:
Hi. If you remember, I posted Expressons Help. Now I am making a
calculator with javascript. I can't get this to work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Calculator</title>
<script language="Javascript">
Click to expand...

The language attribute is depreciated, type is required:

<!-- Begin Hiding
Click to expand...

Completely unnecessary.
var total = 0
Click to expand...

You should end statements with a semi-colon, though it isn't strictly
required and isn't causing your issues here.

var total = 0;
var operator = 0
function calculate(number){
firm = document.form.value1
firm.value = firm.value + number
}
function operator(opvalue){
Click to expand...

You have a global variable called 'operator' and a function called
'operator'. Firefox assigns 'operator' to the variable, the function
is not defined. Change the name of either the variable or the
function.

Seems you really wanted the global variable to be 'theoperator', so I'd
change the declaration of the variable (and tweak the name) to:

var theOperator = 0

theoperator = opvalue
total = document.form.value1.value
document.form.sup.value = ""
Click to expand...

There is no element in the form 'form' with a name of 'sup', did you
mean 'value1'?
}
function equals(){
Click to expand...

You have defined equals as a form element name, that conflicts with
your equals function name - change one of them (I'll change the
element name since you don't use it for anything anyway).
currentDspvalue = eval(document.form.value1.value)
Click to expand...

Do not use 'eval', there is nearly always a better way. In this case,
it is totally redundant.

currentDspvalue = document.form.value1.value;
previousDspvalue = eval(total)
Click to expand...

And here too.

previousDspvalue = total;

// add
if (theoperator == "+"){
answer = currentDspvalue + previousDspvalue
Click to expand...

The variables you are adding are likely strings, you need to ensure
they are numbers. The unary operator is simplest:

answer = +currentDspvalue + +previousDspvalue;
}
// divide
else if (theoperator == "/"){
answer = currentDspvalue / previousDspvalue
}
// multilply
Click to expand...

multiply ?

else if (theoperator == "*"){
answer = currentDspvalue * previousDspvalue
}
// subtract
else if (theoperator == "-"){
answer = currentDspvalue - previousDspvalue
}
document.form.sup.value = answer
}
Click to expand...

It may be suitable to use a switch statement rather than ifs, but
that's up to you.
// -->
Click to expand...

Remove this too.
</script>
<body bgcolor="blue">
<form name="form">
Click to expand...

Forms require an action attribute, even if it's empty:

<form name="form" action="">

I'd change the name of the form to make it more obvious that it is the
name of a form, not just a form.
<input name="value1" length=15 type="text"><br>
Click to expand...

Inputs do not have a 'length' attribute. 'size' will set the width of
a text input in characters, 'maxlength' will set the maximum number of
characters the user may enter.
<input name="1" type="button" value="1" onClick="calculate(1)">
<input name="2" type="button" value="2" onClick="calculate(2)">
<input name="3" type="button" value="3" onClick="calculate(3)">
<input name="4" type="button" value="4" onClick="calculate(4)">
<input name="5" type="button" value="5" onClick="calculate(5)">
<input name="6" type="button" value="6" onClick="calculate(6)">
<input name="7" type="button" value="7" onClick="calculate(7)">
<input name="8" type="button" value="8" onClick="calculate(8)">
<input name="9" type="button" value="9" onClick="calculate(9)">
<input name="0" type="button" value="0" onClick="calculate(0)">
<input name="decimal" type="button" value=" . " onClick=calculate(".")>
Click to expand...

You must use quotes around javascript in the onclick attribute:

<input name="decimal" type="button" value=" . "
onClick="calculate('.')">

The same goes for all following onclick attributes:
<input name="plus" type="button" value="Plus" onClick =operator("+")>
<input name="minus" type="button" value="minus" onClick =operator("-")>
<input name="multiply" type="button" value="times" onClick
=operator("*")>
<input name="divide" type="button" value="divided by" onClick
=operator("/")>
<input name="equals" type="button" value=" = " onClick = "equals()">
Click to expand...

Change the name of this element, say:

<input name="reset" type="reset" value="clear">
</form>
</body>
</html>

It works fine until I press the equal button.
Click to expand...

I presume you are not using any debugging tools or you would not have
come to that conclusion.

A working version of your script with the above corrections applied is
below.

[...]

The above fixes just get your current code to work, there is a lot more
required before your calculator becomes a robust solution. For
example, you do not prevent users directly entering characters into
the text field and do not validate the input at all.

Once a sum is complete, the first entry of the next number is appended
to the last result - users have to clear the input manually.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Calculator</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

var total = 0
var theOperator = 0

function calculate(number){
firm = document.form.value1;
firm.value = firm.value + number;
}

function operator(opvalue){
theOperator = opvalue;
total = document.form.value1.value;
// document.form.sup.value = ""
document.form.value1.value = ""
}

function equals(){
// currentDspvalue = eval(document.form.value1.value);
currentDspvalue = document.form.value1.value;
previousDspvalue = total;

// add
if (theOperator == "+"){
answer = +currentDspvalue + +previousDspvalue;
// divide
} else if (theOperator == "/"){
answer = currentDspvalue / previousDspvalue
// multiply
} else if (theOperator == "*"){
answer = currentDspvalue * previousDspvalue
// subtract
} else if (theOperator == "-"){
answer = currentDspvalue - previousDspvalue
}
// document.form.sup.value = answer
document.form.value1.value = answer;
}
</script>
<body bgcolor="blue">
<form name="form">
<input name="value1" size="15" type="text"><br>
<input name="1" type="button" value="1" onClick="calculate(1)">
<input name="2" type="button" value="2" onClick="calculate(2)">
<input name="3" type="button" value="3" onClick="calculate(3)">
<input name="4" type="button" value="4" onClick="calculate(4)">
<input name="5" type="button" value="5" onClick="calculate(5)">
<input name="6" type="button" value="6" onClick="calculate(6)">
<input name="7" type="button" value="7" onClick="calculate(7)">
<input name="8" type="button" value="8" onClick="calculate(8)">
<input name="9" type="button" value="9" onClick="calculate(9)">
<input name="0" type="button" value="0" onClick="calculate(0)">
<input name="decimal" type="button" value=" . "
onClick="calculate('.')">
<input name="plus" type="button" value="Plus"
onClick="operator('+')">
<input name="minus" type="button" value="minus"
onClick="operator('-')">
<input name="multiply" type="button" value="times"
onClick="operator('*')">
<input name="divide" type="button" value="divided by"
onClick="operator('/')">
<input name="signEquals" type="button" value=" = "
onClick="equals()">
<input name="reset" type="reset" value="clear">
</form>
</body>
</html>
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Wed, 11
May 2005 02:28:57, seen in RobG
Forms require an action attribute, even if it's empty:

<form name="form" action="">
Click to expand...

Testers and validators may not like an empty action : I've settled at
present on action="#" .
I'd change the name of the form to make it more obvious that it is the
name of a form, not just a form.
Click to expand...

Indeed; I'd suggest that, except for variables local to a short
function, it's generally helpful not to use as an identifier anything
which is reserved or predefined in javascript, or which is likely to
occur in the rest of the page.

Then one may use general file-handling tools such as MiniTrue without
much risk of finding irrelevant occurrences.


ASIDE : most of my pages are now mostly converted to the
better code-displaying functions (Thanks, LRN).
 
M

mwh

Thank You!

I am a very novice javascript author, I thank you alot.

(____)
(\/)
/-------\/
/ | MWH ||
- ||----||
 
M

mwh

Thank You!

I am a very novice javascript author, I thank you alot.

(____)
(\/)
/-------\/
/ | MWH ||
- ||----||
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help me sort out this script 1
I dont get this. Please help me!! 2
Javascrip code wont run properly. 2
Survey details won't go through using php, ajax, Mysql 0
Song requests 4
Reversing output of user input by using while loop... 2
All CRUD operations work except POST. Why? 2
Very Basic CC Validation Javascript 0

Members online

No members online now.
Total: 37 (members: 1, guests: 36)
Robots: 433

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top