Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Calculator: evaluate on Enter key?

    I made myself a basic Windows-style calculator using Javascript and HTML forms. The code is as follows:

    PHP Code:
    <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.

    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?
    Last edited by name _F1; 09-03-2006 at 01:31 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Any help?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    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.

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You dont actually need a form for this. Your output text can be rewritten like this.

    PHP Code:
    <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)

    PHP Code:
    <form name="calc" id="calc" onsubmit="calc.output.value = eval(calc.output.value);return(false);"
    Cheers mate, let me know how it goes

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    The page still refreshes with that code, and even without a form. Other than that, it's perfect.

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    PHP Code:
    <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
    so happy, so cool

    http://coolersport.info

  • #8
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    You're right; sorry. I left some Javascript that I had been trying earlier on the page when I tested it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •