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;
// add
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:
answer = +currentDspvalue + +previousDspvalue;
}
// divide
else if (theoperator == "/"){
answer = currentDspvalue / previousDspvalue
}
// multilply
multiply ?
else if (theoperator == "*"){
answer = currentDspvalue * previousDspvalue
}
// subtract
else if (theoperator == "-"){
answer = currentDspvalue - previousDspvalue
}
document.form.sup.value = answer
}
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(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(".")>
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;
// 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>
--
Rob
