如何让我的计算器在按下操作员按钮后计算？

Question

Im trying to make a calculator however i cant figure out how to make it chain operations like 4+4+4-5. instead i have to do equals button between each of them(so 4+4 = 8, i then have to press + 4 then = to get a total instead of it doing it after + is pushed. i'd like it to instead calculate when the operator button is pressed, get an answer in that situation.

Here is my javascript. https://codepen.io/hbz19/pen/KKBgYMP

function add(x, y) {
        return x + y
    };

    function subtract(x, y) {
         return x - y
};

function multiply(x, y) {
    return x * y
};

function divide(x, y) {
    return x / y
};

function multiplyarray(array2) {
  return array2.reduce((a, b)=> a*b)
};

function operate(firstNum, secondNum, operatorChoice) {
 let firstNumToNumber = parseInt(firstNum);
 let secondNumToNumber = parseInt(secondNum);
 if (operatorChoice === "+") {
   let answer = add(firstNumToNumber, secondNumToNumber);
   console.log(answer);
   displayArea.innerHTML = answer;
   

} if (operatorChoice === "-") {
    answer = subtract(firstNumToNumber, secondNumToNumber);
    console.log(answer);
    displayValue = answer;

  } else if (operatorChoice === "/") {
    answer = divide(firstNumToNumber, secondNumToNumber);
    console.log(answer);
    displayArea.innerHTML = answer;

  } else if (operatorChoice === "*") {
    answer = multiply(firstNumToNumber, secondNumToNumber);
    console.log(answer);
    displayArea.innerHTML = answer;

  }
  
};
  let answer = ""
  let value = "";
  let firstNum = "";
  let secondNum = "";
  let operatorChoice = "";
  let currentValue = "";
  let previousValue = "";
  let displayValue = "";
  let displayArea = document.getElementById("display");
  displayArea.innerHTML += displayValue;
 
  let buttons = document.querySelectorAll(".numbers");
  buttons.forEach(button => {
    button.addEventListener("click", (e) => {
     
    
      updateDisplay(e);
    })
  });


  let updateDisplay = (e) => {
if(displayArea.innerHTML == answer) displayArea.innerHTML = ""
    currentValue = e.target.innerHTML;
    previousValue = displayArea.innerHTML;
    displayValue = previousValue + currentValue;
    displayArea.innerHTML = displayValue
  }


let operateButtons = document.querySelectorAll(".operator");
operateButtons.forEach(button => {
  button.addEventListener("click", (e) => {
   
    startCalculation(e);
  })
});

let startCalculation = (e) => {
firstNum = displayArea.innerHTML;
operatorChoice = e.target.innerHTML;
console.log(firstNum);
console.log(operatorChoice);
displayArea.innerHTML = "";
};

let equalButton = document.querySelectorAll(".equal");
equalButton.forEach(button => {
  button.addEventListener("click", (e) => {
   
    ;
    calculate(e);
  })
});

let calculate = (e) => {
  secondNum = displayValue;
  console.log(firstNum, operatorChoice, secondNum);
  operate(firstNum, secondNum, operatorChoice);
}

let clearButton = document.querySelectorAll(".reset");
clearButton.forEach(button => {
  button.addEventListener("click", (e) => {

    clear(e);
  })
});

function clear (e) {
  let firstNum = "";
  let secondNum = "";
  let operatorChoice = "";
  let currentValue = "";
  let previousValue = "";
  let displayValue = "";
  displayArea.innerHTML = "";
  console.log(displayValue, firstNum, secondNum,operatorChoice, currentValue, previousValue)
  return displayValue, firstNum, secondNum, operatorChoice, currentValue, previousValue
}````

Answer 1

This is the expected behavior since your functions take 2 numbers. Take operate for example

function operate(firstNum, secondNum, operatorChoice) {
 let firstNumToNumber = parseInt(firstNum);
 let secondNumToNumber = parseInt(secondNum);
//...
}

The logic you use is: look at operator, based on operator calculate number one with number two

What you need to do is to be able to take more numbers and operators and calculate them, respecting the order of operations, when equal is pressed

There are different ways to go about that, fortunately js has a handy function called eval() that can correctly calculate a string. one easy way is to store your numbers and operators in an array using push everytime a number or an operator is clicked

You'll end up with something like

let numbersToCalculate = [45, '+', 3, '*', 10]

Then we join the array to end up with a string

const numbersStr = numbersToCalculate.join(' ')

we end up with

"45 + 3 * 10"

Then, when equal is pressed we can do

eval(numbersStr)

and get the result

You could also directly push to a string, I personally like to use an array first.