...
PDA

Calculator: evaluate on Enter key?

name _F1
09-03-2006, 01:27 PM
I made myself a basic Windows-style calculator using Javascript and HTML forms. The code is as follows:

<form name="calc" id="calc" action="javascript:calc.output.value = eval(calc.output.value);">
<input type="text" name="output" id="output" value="" />
<table>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="7" onclick="calc.output.value += '7'" />
<td class="calctd"><input type="button" class="calcbtn" value="8" onclick="calc.output.value += '8'" />
<td class="calctd"><input type="button" class="calcbtn" value="9" onclick="calc.output.value += '9'" />
<td class="calctd"><input type="button" class="calcbtn" value="/" onclick="calc.output.value += '/'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="4" onclick="calc.output.value += '4'" />
<td class="calctd"><input type="button" class="calcbtn" value="5" onclick="calc.output.value += '5'" />
<td class="calctd"><input type="button" class="calcbtn" value="6" onclick="calc.output.value += '6'" />
<td class="calctd"><input type="button" class="calcbtn" value="*" onclick="calc.output.value += '*'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="1" onclick="calc.output.value += '1'" />
<td class="calctd"><input type="button" class="calcbtn" value="2" onclick="calc.output.value += '2'" />
<td class="calctd"><input type="button" class="calcbtn" value="3" onclick="calc.output.value += '3'" />
<td class="calctd"><input type="button" class="calcbtn" value="-" onclick="calc.output.value += '-'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="0" onclick="calc.output.value += '0'" />
<td class="calctd"><input type="button" class="calcbtn" value="." onclick="calc.output.value += '.'" />
<td class="calctd"><input type="button" class="calcbtn" value="=" onclick="calc.output.value = eval(calc.output.value)" />
<td class="calctd"><input type="button" class="calcbtn" value="+" onclick="calc.output.value += '+'" />
</tr>
</table>
</form>
It works fine. However, I want the answer to be evaluated when the Enter key is pressed, also. I tried adding the Javascript in the form's action attribute, but when I submit the form it goes to a new page showing the answer [and only the answer] rather than just changing the value of the input field.

If possible, I'd like to keep any method to the action/onsubmit attributes rather than adding a function to check if the Enter key is pressed. However, if this can't be done then a function when the Enter key is pressed will be fine.

Any help would be appreciated. :o

EDIT: I found another error, in IE. If the syntax for the Maths is not correct, it causes an error. Is there any way to either stop multiple operators/decimal points immediately next to each other, or simply stop the errors?
name _F1
09-04-2006, 01:46 PM
Any help? :)
vwphillips
09-04-2006, 02:41 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function cal(obj){
obj.form.output.value+=obj.value;
obj.blur();
}

function total(frm){
val=eval(document.calc.output.value)||'';
document.calc.output.value = val;
}

function Key(e){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (!document.all){ KeyCode=e.which; }
else { KeyCode=event.keyCode; }
if (KeyCode==13){
total();
}
}

document.onkeypress=function(event){ Key(event); }

//-->
</script>

</head>

<body>
<form name="calc" id="calc" >
<input type="text" name="output" id="output" value="" onkeydown="return false;" />
<table>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="7" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="8" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="9" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="/" onclick="cal(this);" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="4" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="5" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="6" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="*" onclick="cal(this);" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="1" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="2" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="3" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="-" onclick="cal(this);" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="0" onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="." onclick="cal(this);" />
<td class="calctd"><input type="button" class="calcbtn" value="=" onclick="total()" />
<td class="calctd"><input type="button" class="calcbtn" value="+" onclick="cal(this);" />
</tr>
</table>
</form>
</body>

</html>
name _F1
09-05-2006, 10:25 AM
When using that code, the page reloads (which I don't want, but it is acceptable if that is the only way). In addition, the field only shows the output briefly before it disappears (when pressing the Enter key). The problem in IE where a runtime error occurs when the math syntax is not valid is still present.

Also, if possible, I'd like to only evaluate the outcome if something on the form is in focus (preferred), or when the text field (outcome) is in focus.
dungsport
09-06-2006, 08:16 AM
You dont actually need a form for this. Your output text can be rewritten like this.

<input type="text" name="output" id="output" value="" onkeydown="if(event.keyCode==13){this.value = eval(this.value);}" />

In my opion, register the event document-wide is not a good idea when you have this script running inside a larger page.

Anyway, to prevent the page reloaded when the form is submitted, you can add this code to the form tag (I may be wrong for this :P)

<form name="calc" id="calc" onsubmit="calc.output.value = eval(calc.output.value);return(false);">

Cheers mate, let me know how it goes ;)
name _F1
09-06-2006, 11:12 AM
The page still refreshes with that code, and even without a form. Other than that, it's perfect.
dungsport
09-06-2006, 11:20 AM
Sorry but I don't see it refreshes at all. This is all I have in the HTML page and it works like a charm.

<form name="calc" id="calc" onsubmit="calc.output.value = eval(calc.output.value);return(false);">
<input type="text" name="output" id="output" value="" onkeydown="if(event.keyCode==13){this.value = eval(this.value);}" />
<table>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="7" onclick="calc.output.value += '7'" />
<td class="calctd"><input type="button" class="calcbtn" value="8" onclick="calc.output.value += '8'" />
<td class="calctd"><input type="button" class="calcbtn" value="9" onclick="calc.output.value += '9'" />
<td class="calctd"><input type="button" class="calcbtn" value="/" onclick="calc.output.value += '/'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="4" onclick="calc.output.value += '4'" />
<td class="calctd"><input type="button" class="calcbtn" value="5" onclick="calc.output.value += '5'" />
<td class="calctd"><input type="button" class="calcbtn" value="6" onclick="calc.output.value += '6'" />
<td class="calctd"><input type="button" class="calcbtn" value="*" onclick="calc.output.value += '*'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="1" onclick="calc.output.value += '1'" />
<td class="calctd"><input type="button" class="calcbtn" value="2" onclick="calc.output.value += '2'" />
<td class="calctd"><input type="button" class="calcbtn" value="3" onclick="calc.output.value += '3'" />
<td class="calctd"><input type="button" class="calcbtn" value="-" onclick="calc.output.value += '-'" />
</tr>
<tr>
<td class="calctd"><input type="button" class="calcbtn" value="0" onclick="calc.output.value += '0'" />
<td class="calctd"><input type="button" class="calcbtn" value="." onclick="calc.output.value += '.'" />
<td class="calctd"><input type="button" class="calcbtn" value="=" onclick="calc.output.value = eval(calc.output.value)" />
<td class="calctd"><input type="button" class="calcbtn" value="+" onclick="calc.output.value += '+'" />
</tr>
</table>
</form>
name _F1
09-06-2006, 12:06 PM
You're right; sorry. I left some Javascript that I had been trying earlier on the page when I tested it.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum