我刚开始学习 javascript，我正在尝试制作一个计算器网站，但无法让它工作

Question

我写了一个由 HTML、CSS 和 javascript 组成的代码，它应该是一个网站中的计算器。 但是，由于我对 javascript 中的编码不是很有经验，所以我遇到了一些问题。 现在我只对数字输入的部分进行了编码（不是用于操作和删除），当我点击任何数字时，显示框中什么都没有出现。 谁能帮帮我？

 class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousoperandtextelement = previousOperandTextElement this.currentOperandTextElement = currentOperandTextElement this.clear() } clear() { this.currentOperand = '' this.previousOperand = '' this.operation = undefined } delete() { } appendNumber(number) { this.currentOperand = number } chooseoperation(operation) { } compute() { } updateDisplay() { this.currentOperandTextElement.innerText = this.currentOperand } } 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 allcleaButton = document.querySelector('[data-all-clear]') const previousOperandTextElement = document.querySelector('[data-previous-operand]') const currentOperandTextElement = document.querySelector('[data-current-operand]') const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement) numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.innerText) calculator.updateDisplay() }) })

 <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>*</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>

Answer 1

appendNumber不是 append。 它覆盖。 <input type="text">没有innerText 。 它有一个value ：

 class Calculator { constructor(currentOperandTextElement) { this.currentOperandTextElement = currentOperandTextElement this.currentOperand = '' } appendNumber(number) { this.currentOperand += number } updateDisplay() { this.currentOperandTextElement.value = this.currentOperand } } const numberButtons = document.querySelectorAll('[data-number]') const currentOperandTextElement = document.querySelector('[data-current-operand]') const calculator = new Calculator(currentOperandTextElement) numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.innerText) calculator.updateDisplay() }) })

 <button data-number>1</button> <input type="text" data-current-operand>