Velocity Reviews > Calculator Help

# Calculator Help

mwh
Guest
Posts: n/a

 05-10-2005
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)
if (theoperator == "+"){
}
// divide
else if (theoperator == "/"){
}
// multilply
else if (theoperator == "*"){
}
// subtract
else if (theoperator == "-"){
}
}
// -->
</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(">
<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 ||
- ||----||

RobG
Guest
Posts: n/a

 05-11-2005
mwh wrote:
> 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">

The language attribute is depreciated, type is required:

<script type="text/javascript">

> <!-- Begin Hiding

Completely unnecessary.

> var total = 0

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){

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 = ""

There is no element in the form 'form' with a name of 'sup', did you
mean 'value1'?

> }
> function equals(){

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)

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)

And here too.

previousDspvalue = total;

> if (theoperator == "+"){
> answer = currentDspvalue + previousDspvalue

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

> }
> // divide
> else if (theoperator == "/"){
> answer = currentDspvalue / previousDspvalue
> }
> // multilply

multiply ?

> else if (theoperator == "*"){
> answer = currentDspvalue * previousDspvalue
> }
> // subtract
> else if (theoperator == "-"){
> answer = currentDspvalue - previousDspvalue
> }
> }

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

> // -->

Remove this too.

> </script>
> <body bgcolor="blue">
> <form name="form">

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>

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(">
> <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(".")>

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()">

Change the name of this element, say:

<input name="signEquals" ... >

> <input name="reset" type="reset" value="clear">
> </form>
> </body>
> </html>
>
> It works fine until I press the equal button.

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;

if (theOperator == "+"){
// divide
} else if (theOperator == "/"){
// multiply
} else if (theOperator == "*"){
// subtract
} else if (theOperator == "-"){
}
}
</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(">
<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>

--
Rob

Dr John Stockton
Guest
Posts: n/a

 05-11-2005
JRS: In article <J5ege.1371\$(E-Mail Removed)>, dated Wed, 11
May 2005 02:28:57, seen in news:comp.lang.javascript, RobG
<(E-Mail Removed)> posted :
>
> Forms require an action attribute, even if it's empty:
>
> <form name="form" action="">

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.

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).

--
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> Update hope?

mwh
Guest
Posts: n/a

 05-16-2005
Thank You!

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

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

mwh
Guest
Posts: n/a

 05-16-2005
Thank You!

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

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

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is OffTrackbacks are On Pingbacks are On Refbacks are Off Forum Rules

 Similar Threads Thread Thread Starter Forum Replies Last Post Adam Pflug HTML 6 10-02-2005 07:34 AM BIGEYE Computer Support 3 10-02-2004 05:08 PM Maria Laura Re Java 4 12-14-2003 05:59 AM Rafael C Programming 6 12-04-2003 01:36 PM terry Digital Photography 0 10-08-2003 01:27 PM