Calculator doesn’t calculate, just adds values. JS

by

So I decided to make a calculator for practice sake, and now I’m facing the issue in which console doesn’t say any errors, it shows digits on screen, but it doesn’t calculate them at all, just adds these values 1 by 1. I also have a video. Here’s the code:

let buffer="0";
let runningTotal = 0;
let previousOperator;


const screen = document.querySelector('.screen');
const all_buttons = document.querySelectorAll('.calc_btns .calc_btn');

function buttonClick(value) {
  if (isNaN(value)) {
    handleButtonClick(value);
  } else {
    handleNumber(value);
  }
  updateScreen();
}

function handleButtonClick(symbol) {
  switch (symbol) {
    case 'A':
      clearBuffer();
      break;
    case '=':
      if (previousOperator == null) {
        return;
      }
      mathOperator(parseFloat(buffer));
      buffer = runningTotal.toString();
      runningTotal = 0;
      break;
    case '%':
    case '-':
    case '*':
    case '÷':
    case '×':
      handleMath(symbol);
      break;
    default:
      handleNumber(symbol);
      break;
  }
  updateScreen();
}

function init() {
  for (let i = 0; i < all_buttons.length; i++) {
    let button = all_buttons[i];
    button.addEventListener('click', function(evt) {
      handleButtonClick(evt.target.textContent);
      console.log('button clicked');
    })
  }
}
init();

function handleMath(symbol) {

  if (buffer == '0') {
    return;
  }

  const intBuffer = parseFloat(buffer);

  if (runningTotal == 0) {
    runningTotal = intBuffer;
  } else {
    handleButtonClick(intBuffer);
  }
  mathOperator(symbol);
  buffer="0";
}

function mathOperator(intBuffer) {
  if (previousOperator == '+') {
    runningTotal += intBuffer;
  } else if (previousOperator == '-') {
    runningTotal -= intBuffer;
  } else if (previousOperator == '%') {
    runningTotal %= intBuffer;
  } else if (previousOperator == '÷') {
    runningTotal /= intBuffer;
  } else if (previousOperator == '×') {
    runningTotal *= intBuffer;
  }
}

function handleNumber(numberString) {
  if (buffer == '0') {
    buffer = numberString;
  } else {
    buffer += numberString;
  }
}

function clearBuffer() {
  buffer="0";
  runningTotal = 0;
  previousOperator = undefined;
}

function updateScreen() {
  screen.textContent = buffer;
}
body {
  background-color: grey;
}

.container {
  margin-left: 50% auto;
  margin-top: 100px;
  border: 3px solid;
  border-radius: 15px;
  padding: 25px 30px;
  width: 240px;
  height: 360px;
  font-size: 40px;
  font-family: "Ubuntu", sans-serif;
  background-color: black;
  color: white;
  border-color: black;
  box-shadow: 15px 15px 20px black;
}

.calc_btn {
  border-radius: 50px;
  border: 1px solid;
  font-family: "Ubuntu", sans-serif;
  font-size: 30px;
  padding: 5px 9px;
  width: 50px;
  height: 50px;
  background-color: rgb(71, 69, 69);
  color: white;
  border-color: rgb(71, 69, 69);
  display: inline;
}

.calc_btn:hover {
  background-color: grey;
}

.calc_btn:last-child {
  background-color: orange;
}

.calc_btn:last-child:hover {
  background-color: rgb(235, 179, 76);
}

.screen {
  text-align: right;
  padding: 5px;
  font-family: inherit;
  font-size: 45px;
  border: 1px solid;
  border-radius: 15px;
}

.calc_btn_row {
  display: flex;
  justify-content: space-between;
  margin: 5% 0;
}
<div class="container">
  <section class="screen">
    0
  </section>

  <section class="calc_btns">
    <div class="calc_btn_row">
      <button class="calc_btn">
                A
              </button>
      <button class="calc_btn">
                /-
              </button>
      <button class="calc_btn">
                %
              </button>
      <button class="calc_btn">
                ÷
              </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
                7
              </button>
      <button class="calc_btn">
                8
              </button>
      <button class="calc_btn">
                9
              </button>
      <button class="calc_btn">
                ×
              </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
                4
              </button>
      <button class="calc_btn">
                5
              </button>
      <button class="calc_btn">
                6
              </button>
      <button class="calc_btn">
                -
              </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
                1
              </button>
      <button class="calc_btn">
                2
              </button>
      <button class="calc_btn">
                3
              </button>
      <button class="calc_btn">
                +
              </button>
    </div>
    <div class="calc_btn_row">
      <button id="num0" class="calc_btn">
                0
              </button>
      <button class="calc_btn">
                ,
              </button>
      <button class="calc_btn">
                =
              </button>
    </div>
  </section>
</div>

If i provided not enough information, not in comments!

  • add console.log(symbol) in the handleButtonClick and you’ll see that the case does not match due to whitespaces.

    – 

  • Seems you have forgotten to set the previousOperator, you use it in if-statements, but it is never set to any value.

    – 

I have an answer for my question. I should have added trim() to

function init(){
    for(let i = 0; i < all_buttons.length; i++){
        let button = all_buttons[i];
        button.addEventListener('click', function (evt){
            handleButtonClick(evt.target.textContent.trim()); //here
            console.log('button clicked');
        })
    }
}

and I needed to define previousOperation

function handleMath(symbol){

    if(buffer == '0'){
        return;
    }

    const intBuffer = parseFloat(buffer);

    if(runningTotal == 0){
        runningTotal = intBuffer;
    }
    else{
        handleButtonClick(intBuffer);
    }
    previousOperator = symbol; //here
    buffer="0";
}

Leave a Comment