JS 计算器 - 我的代码有什么问题？

Question

编辑 2：我只是从头开始。当我是新手时，现在试图理解这些复杂的问题毫无意义。咨询了我的同伙中可以和我一起经历的人。感谢您的建议和见解。

我一直在大量编辑这段代码，因为原始代码依赖于构造函数。计算器当前在按下时不会在任一显示器上附加任何数字，我不知道为什么！我认为问题出在附加/节点过程或更新显示功能的某个地方！欢迎任何和所有建议/想法。

就上下文而言，我参加了为期 12 周的强化课程 5 周，并且是一名婴儿婴儿编码员。请像我5岁一样解释！！！

编辑：如果您想查看原始代码，请查看我之前的问题！

JAVA 脚本

const calculator =
  (previousOperandTextElement, currentOperandTextElement, operation);

clear = () => {
  currentOperand = "";
  previousOperand = "";
  operation = undefined;
};

remove = () => {
  currentOperand = currentOperand.toString().slice(0, -1);
};


chooseOperation = (operation) => {
  if (currentOperand === "") return;
  if (previousOperand !== "") {
    compute();
  }

  operation = operation;
  previousOperand = currentOperand;
  currentOperand = "";
};

compute = () => {
  let computation;
  const prev = parseFloat(previousOperand);
  const current = parseFloat(currentOperand);
  if (isNaN(prev) || isNaN(current)) return;
  switch (operation) {
    case "+":
      computation = prev + current;
      break;
    case "-":
      computation = prev - current;
      break;
    case "*":
      computation = prev * current;
      break;
    case "÷":
      computation = prev / current;
      break;
    default:
      return;
  }
  currentOperand = computation;
  operation = undefined;
  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 = () => {
  currentOperandTextElement.innerText = getDisplayNumber(currentOperand);
  if (operation != null) {
    previousOperandTextElement.innerText = `${getDisplayNumber(
      previousOperand
    )} ${operation}`;
  } else {
    previousOperandTextElement.innerText = "";
  }
};

appendNumber = (number) => {
  if (number === "." && currentOperand.includes(".")) return;
  currentOperand = currentOperand.toString() + number.toString();
};


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

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

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

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

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

item = (previousOperandTextElement, currentOperandTextElement) => {
  previousOperandTextElement = previousOperandTextElement;
  currentOperandTextElement = currentOperandTextElement;
  clear();
};

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]"
);

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Calculator</title>
    <script src="calcedit.js" defer></script>
  </head>
  <body>
    <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 class="span-two">AC</button>
      <button data-delete>DEL</button>
      <button data-operation>÷</button>
      <button data-number>1</button>
      <button data-number>2</button>
      <button data-number>3</button>
      <button data-operation>x</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 class="span-two">=</button>
    </div>
  </body>
</html>

Answer 1

所以通读你的代码，这个问题与你对previous question的理解有关

删除类意味着您不再有 calculator 实例或对象可以使用，因此您可以以更程序化的方式工作

开始

const calculator =
  (previousOperandTextElement, currentOperandTextElement, operation);

应该替换为

var previousOperandTextElement = "", 
    currentOperandTextElement = "",
    operation;

您拥有calculator 的任何位置（例如calculator.compute();）都应该替换为您创建的新函数，在本例中为compute();，因为您没有可使用的calculator 对象。

正如之前的 cmets 所建议的，这可能不是一个好方法，而类/原型方法可能会更好（你原来的方法）