Thu. Dec 5th, 2019

Coding Is Future

Read the best technology articles

Javascript Calculator Example (with explanations)

3 min read

How to make a calculator with Javascript? I explained the meaning of every single line (all calculations and debugging) in the comment sections for Javascript beginners. You can ask if you don’t understand. Stay focused!

// insert the pressed button to "buttonClick" function
 function buttonClick(button){
     // Assign items with "board" id to "display" variable.
     var display = document.getElementById('board');

// If the key pressed is a number, add to display and update
if (isNaN(button) == false) {
    display.innerHTML += button;  }

// clear display if C button is pressed
if(button == 'C'){
    display.innerHTML= '';

// If either + or - or * or / are pressed
if (button == '+' || button == '-' || button == '*' || button == '/'){

    /* If the last digit of the value on the display is a number and there is a value on the display, add the value of the pressed button to the display and update */
    if (isNaN(display.innerHTML.slice(-1)) == false && display.innerHTML.length != 0){
        display.innerHTML += button;

    /* if the last digit of the display is not a number, change this value with the pressed button. So that the operator can be changed at each stage until the "=" is pressed. If you wonder what it would be if the pressed button is a number, then remember, this if condition works under the another if condition which describes type of pressed buttons. And that condition says the pressed button should be "+, -, *, /". */
    if(isNaN(display.innerHTML.slice(-1)) == true){
        display.innerHTML = display.innerHTML.slice(0, -1) + button;

    // If "-" button is pressed and there is no value on the display, type "-"
    if (button == '-' && display.innerHTML.length == 0){
    display.innerHTML = '-'

    // if the pressed button is a dot and the last digit of the value at the display is not a dot, add a dot to value on the display and update.
    else if (button == '.'){
    if(display.innerHTML.slice(-1) != '.'){
       display.innerHTML+= '.';

     /* When the "=" button is pressed, if the last digit of the value on the display is not a number, insert the entire value except the last digit into the eval function */
    else if (button == '='){
    if (isNaN(display.innerHTML.slice(-1)) == true){
        display.innerHTML= eval(display.innerHTML.slice(0,-1));

    // if the last digit of the value on the display is a number, insert all of them into the eval function
    else {display.innerHTML= eval(display.innerHTML);} 



You can examine this calculator on codepen also.

Leave a Reply