How to create your own customized calculator via JavaScript

This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.

Demo


Here is the html code including the CSS stuff:

  1. <style type="text/css">
    
  2. table.calc {
    
  3.      border: 2px solid #0034D1;
    
  4.      background-color: #809FFF;
    
  5. }
    
  6. input.calc {
    
  7.      width: 100%;
    
  8.      margin: 5px;
    
  9. }
    
  10. </style>
    
  11. <fieldset>
    
  12. <legend>Demo</legend>
    
  13. <table class="calc" cellpadding=4>
    
  14. <tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
    
  15. <tr>
    
  16. <td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
    
  17. <td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
    
  18. <td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
    
  19. <td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
    
  20. </tr>
    
  21. <tr>
    
  22. <td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
    
  23. <td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
    
  24. <td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
    
  25. <td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
    
  26. </tr>
    
  27. <tr>
    
  28. <td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
    
  29. <td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
    
  30. <td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
    
  31. <td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
    
  32. </tr>
    
  33. <tr>
    
  34. <td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
    
  35. <td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
    
  36. <td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
    
  37. <td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
    
  38. </tr>
    
  39. <tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
    
  40. </table>

Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the pushButton JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. The rest of the HTML is just icing on the cake so that it actually looks like a calculator.

Here is the JavaScript code for the 2 functions:

  1. function pushButton(buttonValue) {
  2.      if (buttonValue == 'C') {
  3.           document.getElementById('screen').value = '';
  4.      }
  5.      else {
  6.           document.getElementById('screen').value += buttonValue;
  7.      }
  8. }
  9. function calculate(equation) {
  10.      var answer = eval(equation);
  11.      document.getElementById('screen').value = answer;
  12. }

The pushButton function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The calculate function does exactly what it’s name suggests. It takes our string of numbers and operators and evaluates it in line 10. The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.

That’s it!

Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

8 thoughts on “How to create your own customized calculator via JavaScript”

    1. Hi,

      Please have a look at my post on JavaScript prompts. You can use the same exact idea and just use eval on the string that the user has entered into the prompt. The only thing here is that you would have to do input verification and make sure the user has only entered the allowed characters in constructing the string.

  1. This is exactly what I have been looking for! with one exception. :)

    I have added a few other buttons to show a word and represent a specific corresponding number so I get how to modify the code but I can’t seem to figure out how to add one that calculates the percentage that one number represents of another.

    Can you help?

    1. This is possible but it would take a little tweaking of the code. Basically, you would need to alter the equation before submitting it to eval. For example, let’s say “%” will represent your percent function.

      If equation = 2%4

      Alter the equation such that = 2/4*100

      Then execute the eval function with this string

      That should do it.

  2. Thanks for the JavaScript calculator. I was high-centered on the eval function ie. how to make it work on the input string.
    My calculator was set up similar to yours except mine didn’t work! Much appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *