Javascript 计算器历史数字Append函数

我有这个

    <div class="calculator grid">
        <div class="output">
        <div data-previous-operand class="previous-operand"></div>
        <div data-current-operand class="current-operand"></div>
        </div>
        <button data-all-clear>AC</button>
        <button data-delete>DEL</button>
        <button id="innactive" data-operation>()</button>
        <button data-devide data-operation>%</button>
        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-operation>^</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-operation>÷</button>
        <button data-number>7</button>
        <button data-number>8</button>
        <button data-number>9</button>
        <button data-operation>*</button>
        <button data-number>.</button>
        <button data-number>0</button>
        <button data-equals id="equals">=</button>
        <button data-operation>+</button>
        <button data-operation id="minus">-</button>
    </div>

还有这个

class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement, historyLogElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.historyLogElement = historyLogElement;
    this.clear();
    // calculator elements
  }
  // clear button function
  clear() {
    this.currentOperand = "";
    this.previousOperand = "";
    this.operation = undefined;
    this.historyLog = ""; // Initialize history log
  }

  delete() {
    this.currentOperand = this.currentOperand.toString().slice(0,-1);
    this.historyLog = this.historyLog.toString().slice(1);

  }

  appendNumber(number) {
    if (number === "." && this.currentOperand.includes(".")) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
    
    // Prepend the entered number and a newline character to the history log
    this.historyLog = number + this.historyLog;
  }

  chooseOperation(operation) {
    if (this.currentOperand === "") return;
    if (this.previousOperand !== "") {
      this.compute();
    }
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = "";
    
    // Prepend the chosen operation and a newline character to the history log
    this.historyLog = operation + '\n' + this.historyLog;
  }
  
  compute() {
    let computation;
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;
    switch (this.operation) {
      case "+":
        computation = prev + current;
        break;
      case "-":
        computation = prev - current;
        break;
      case "*":
        computation = prev * current;
        break;
      case "÷":
        computation = prev / current;
        break;
      case "/":
        computation = prev / current;
        break;
      default:
        return;
      case "^":
        computation = Math.pow(prev, current);
        break;
      case "%":
        computation = (prev * 100) / current + "%";
        break;
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = "";
  }

  getDisplayNumber(number) {
    const stringNumber = number.toString();
    const integerDigits = parseFloat(stringNumber.split(".")[0]);
    const decimalDigits = stringNumber.split(".")[1];
    let integerDisplay;
    if (isNaN(integerDigits)) {
      integerDisplay = "";
    } else {
      integerDisplay = integerDigits.toLocaleString("en", { maximumFractionDigits: 0 });
    }
    if (decimalDigits != null) {
      return `${integerDisplay}.${decimalDigits}`;
    } else {
      return integerDisplay;
    }
  }

  updateDisplay() {
    this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
    if (this.operation != null) {
      this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
    } else {
      this.previousOperandTextElement.innerText = "";
    }
  this.historyLogElement.innerText = this.historyLog;
  }
}


const numberButtons = document.querySelectorAll("[data-number]");
const operationButtons = document.querySelectorAll("[data-operation]");
const equalsButton = document.querySelector("[data-equals]");
const deleteButton = document.querySelector("[data-delete]");
const allClearButton = document.querySelector("[data-all-clear]");
const previousOperandTextElement = document.querySelector("[data-previous-operand]");
const currentOperandTextElement = document.querySelector("[data-current-operand]");
const historyLogElement = document.querySelector("[data-log]");
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement, historyLogElement);

numberButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
  });
});

operationButtons.forEach((button) => {
  button.addEventListener("click", () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
  });
});

equalsButton.addEventListener("click", (button) => {
  calculator.compute();
  calculator.updateDisplay();
});

allClearButton.addEventListener("click", (button) => {
  calculator.clear();
  calculator.updateDisplay();
});

deleteButton.addEventListener("click", (button) => {
  calculator.delete();
  calculator.updateDisplay();
});

document.addEventListener("keydown", function (event) {
  let patternForNumbers = /[0-9]/g;
  let patternForOperators = /[+\-*/]/g;
  if (event.key.match(patternForNumbers)) {
    event.preventDefault();
    calculator.appendNumber(event.key);
    calculator.updateDisplay();
  }
  if (event.key === ".") {
    event.preventDefault();
    calculator.appendNumber(event.key);
    calculator.updateDisplay();
  }
  if (event.key.match(patternForOperators)) {
    event.preventDefault();
    calculator.chooseOperation(event.key);
    calculator.updateDisplay();
  }
  if (event.key === "Enter" || event.key === "=") {
    event.preventDefault();
    calculator.compute();
    calculator.updateDisplay();
  }
  if (event.key === "Backspace") {
    event.preventDefault();
    calculator.delete();
    calculator.updateDisplay();
  }
  if (event.key == "Delete") {
    event.preventDefault();
    calculator.clear();
    calculator.updateDisplay();
  }
});

为什么历史上的数字是以反转方式显示的？我不明白...我一整天都在换房子，我都快疯了

我把这个.CurrentOperand换成了Numbers，希望得到上面的所有数字，以便在历史上显示操作顺序，而不是把所有数字都放在一行，把运算符放在另一行.