javascript - 将 javascript 计算器中的几个操作串在一起

Question

我需要计算器方面的帮助。我不知道如何将多个操作串联起来。 有人可以帮我解决这个问题，或者给我一些如何继续工作的建议吗？ 我的计算器只能进行3+3，不能进行3+3+3等多项运算。

我的计算器是这样工作的:

1. 从用户处获取号码。存储到您的数组中。
2. 如果用户不断点击数字按钮，请继续将它们插入数组。
3. 当用户点击某个操作符时，将其存储到 currentOperator 中。将数组解析为整数。将结果存储到firstNumber。然后是空数组。
4. 从用户处获取另一个号码，存储到数组中，重复步骤 2。
5. 当用户点击等于按钮时，再次将数组解析为整数。将结果存储到 SecondNumber 并调用函数calculate()

const operator = document.querySelectorAll('.operator');
const equalsKey = document.getElementById('equalsKey');
const display = document.getElementById('result');
const numbers = document.querySelectorAll('.number');
const operators = document.querySelectorAll('.operator');
const clear = document.getElementById('clear');

let firstNumber;
let currentOperator;
let secondNumber;
let tempArray = [];

numbers.forEach((number) => {
    number.addEventListener('click', (e) => {
        tempArray.push(e.target.value); // store value to temparray
        console.log(tempArray);
        display.innerHTML = Number(tempArray.join("")); // display number from array
    });
});

operators.forEach((operator) => {
    operator.addEventListener('click', (e) => {
        currentOperator = e.target.value; // store current operator
        console.log(currentOperator);
        firstNumber = Number(tempArray.join("")); // parse array to integers
        console.log(firstNumber);
        tempArray = []; // empty array
    });
});

clear.addEventListener('click', function () {
    display.textContent = '0';
})

function calculate() {
    secondNumber = Number(tempArray.join(""));
    let result = operate(parseFloat(firstNumber), parseFloat(secondNumber), currentOperator);
    display.textContent = result;
}


function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

function operate(num1, num2, operator) {
    switch (operator) {
        case "+":
            return add(num1, num2);
        case "-":
            return subtract(num1, num2);
        case "*":
            return multiply(num1, num2);
        case "÷":
            return divide(num1, num2);
    }
};

equalsKey.addEventListener('click', calculate);

https://codepen.io/alcatel1962/pen/LYONKKW

当尝试将多个操作串在一起时，我不知道如何思考。

Answer 1

到目前为止，干得好!为了解决你的问题，你应该运用你对不同类型循环的知识，这应该可以让你很容易地解决这个问题。

这里是 pen 的链接从你的分支中 fork 出来，通过一种不同的方法来解决你的问题(尽管是一种非常懒惰的方法)。我的方法试图模仿 Google 计算器的行为(当您在 google 中搜索“计算器”时得到的计算器)

但请注意，我没有考虑负数和 float ，如果您要遵循这种方法，还需要进行验证，如代码注释中所示，当然，您必须推送先前计算的结果作为按下“=”后数组的第一个数字，尝试自己识别/解决这些问题/改进；)祝你好运!

const equalsKey = document.getElementById('equalsKey');
const display = document.getElementById('result');
const clear = document.getElementById('clear');
const numbersAndOperators = document.querySelectorAll('.operator, .number');

let firstNumber;
let currentOperator;
let secondNumber;
let tempArray = [];


function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

// When the user hits any button or operator push them to the array after validating.
numbersAndOperators.forEach((numberOrOperator) => {
    numberOrOperator.addEventListener('click', (e) => {
       // TODO: validate next input here 
        tempArray.push(e.target.value); // store value to temparray
        console.log(tempArray);
        display.innerHTML = tempArray.join(""); // display from array
    });
});

// Go through the array and identify if operators according to the order of 
// BODMAS is present, and execute that operator for the operands left and right to it if found.
function validateBODMAS(inputs){
  let modifiedInputs = inputs
  if(modifiedInputs.includes("÷")){
    modifiedInputs = runOpp(modifiedInputs,"÷",divide)
  } 
  if (modifiedInputs.includes("*")){
    modifiedInputs = runOpp(modifiedInputs,"*",multiply)
  } 
  if (modifiedInputs.includes("+")){
    modifiedInputs = runOpp(modifiedInputs,"+",add)
  } 
  if (modifiedInputs.includes("-")){
    modifiedInputs = runOpp(modifiedInputs,"-",subtract)
  }
  return modifiedInputs;
}

// Run the operator for all opperands next to a particular operator.
// replace the result with operands and operator.
function runOpp(inputarr,oppSymbol,oppCallback){
  while(inputarr.includes(oppSymbol)){
        const indexOpp = inputarr.indexOf(oppSymbol)
        inputarr.splice(indexOpp - 1,3,oppCallback(Number(inputarr[indexOpp - 1]) , Number(inputarr[indexOpp + 1])))
        console.log(inputarr)
  }
  return inputarr
}

function calculate() {
    result = validateBODMAS(tempArray)
    display.textContent = result;
}

clear.addEventListener('click', function () {
    display.textContent = '';
    tempArray = [];
})

equalsKey.addEventListener('click', calculate);