How can I get add and subtract functions in javascript calculator to work correctly?

Question

I am making a basic calculator in javascript. My addition and multiplication buttons work well. However, my subtraction and division functions are not working.

When I click subtract, for some reason that I can't figure out (I've been scratching my head forever), it automatically converts the number in the output to a negative number.

And for division, I can't seem to get the logic down to divide the first number I enter by the second number I enter.

Here is my basic calculate function:

function calculate() {
    if (operator == 'add') {
        runningSum += windowNum;
    } else if (operator == 'subtract') {
        runningSum -= windowNum;  // automatically converts windowNum to negative, unclear why
    } else if (operator == 'multiply') {
        if (runningSum == 0) {
            runningSum = 1;
        }
        runningSum *= windowNum;
    } else if (operator == 'divide') {
        // ever mutation tried comes up with wrong result
    }

    outputWindow.textContent = Number((runningSum).toFixed(5));
    operatorClicked = true;
    numClicked = false;
    document.querySelector('#btnAdd').classList.remove('operatorClicked');
    console.log('windowNum: ' + windowNum);
    console.log('runningSum: ' + runningSum);
}

Because my project is rather big, I've included a link to it in codepen here: https://codepen.io/CDLWebDev/pen/mdJgbeG

Answer 1

I checked your codepen and changed a few things. Mainly, you were performing calculations whenever a click to the operation signs was made, which is not really something you want to do, since you can't perform operations when you don't know what number will come next. On calculators, calculations are actually performed when you press the "equals" sign.

What really has to happen and what I've done in the code below is keep the number you just pressed as your runningSum and choose the operation, then when you press equal you have all the info you need.

https://codepen.io/VPR/pen/poJBzXP

function clickOperatorBtn() {
if (numClicked) {
  if (target == document.querySelector("#btnDivide")) {
    operator = "divide";
    runningSum = windowNum;
    clearWindow();
  } else if (target == document.querySelector("#btnMultiply")) {
    operator = "multiply";
    runningSum = windowNum;
    clearWindow();
  } else if ...

I assume this is a learning exercise, so keep it up, but I think the logic behind your code could improve, when you're done try googling some tutorials on calculators, you'll find many which walk you through the steps performed and the logic behind it.

Answer 2

I tried your code and the function calculate is ran every time you change the operator. That means that when, initially, click on the '-' sign you will trigger that function. Bear with me:

else if (operator == 'subtract') {
    // windowNum == 3 - for example
    // runningSum == 0 
    runningSum -= windowNum;
    // result will be 0 - 3 == -3

This means that if you do the same with say, 7. You'll be doing -3 - 7 == -10

About the division: This is also happening, so when you do something like clicking 8 and then division, what you're doing is 0 / 8 (which apparently results in 1).

Hope this helps!