使所有清除按钮在计算器上工作

Question

我正在尝试使全清除按钮在计算器上工作，但由于某种原因，我必须单击“=”按钮才能工作，谁能帮忙，应该让它工作的功能是页面底部。

Answer 1

错字：const equalsButton = document.querySelector('[data-equals]');const deleteButton = document.querySelector('[data-equals]');const allClearButton = document.querySelector('[data-equals]');// 应该const equalsButton = document.querySelector('[data-equals]');const deleteButton = document.querySelector('[data-delete]');const allClearButton = document.querySelector('[data-all-clear]');document.addEventListener("DOMContentLoaded",function() {class Calculator {&nbsp; &nbsp; constructor(previousOperandTextElement, currentOperandTextElement) {&nbsp; &nbsp; &nbsp; &nbsp; this.previousOperandTextElement = previousOperandTextElement;&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperandTextElement = currentOperandTextElement;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; clear() {&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperand = '';&nbsp; &nbsp; &nbsp; &nbsp; this.previousOperand = '';&nbsp; &nbsp; &nbsp; &nbsp; this.operation = undefined;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; deleteFn() {&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperand = this.currentOperand.slice(0, -1)&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; appendNumber(number) {&nbsp; &nbsp; &nbsp; &nbsp; if (number === '.' && this.currentOperand.includes('.')) return;&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperand = this.currentOperand.toString() + number.toString();&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; chooseOperation(operation) {&nbsp; &nbsp; &nbsp; &nbsp; if (this.currentOperand === '') return&nbsp; &nbsp; &nbsp; &nbsp; if (this.previousOperand !== '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.compute()&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; this.operation = operation;&nbsp; &nbsp; &nbsp; &nbsp; this.previousOperand = this.currentOperand&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperand = ''&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; compute() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let computation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const prev = parseFloat(this.previousOperand)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const current = parseFloat(this.currentOperand)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isNaN(prev)) isNaN(current)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(this.operation) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case '+':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; computation = prev + current&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case '-':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; computation = prev - current&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case '×':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; computation = prev * current&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case '÷':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; computation = prev / current&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.currentOperand = computation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.operation = undefined&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.previousOperand = ''&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; updateDisplay() {&nbsp; &nbsp; &nbsp; &nbsp; this.currentOperandTextElement.innerText = this.currentOperand;&nbsp; &nbsp; &nbsp; &nbsp; this.previousOperandTextElement.innerText = this.previousOperand;&nbsp; &nbsp; }}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 calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);calculator.clear();numberButtons.forEach(button => {&nbsp; &nbsp; button.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; calculator.appendNumber(button.innerText);&nbsp; &nbsp; &nbsp; &nbsp; calculator.updateDisplay();&nbsp; &nbsp; });});operationButtons.forEach(button => {&nbsp; &nbsp; button.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; calculator.chooseOperation(button.innerText);&nbsp; &nbsp; &nbsp; &nbsp; calculator.updateDisplay();&nbsp; &nbsp; });});equalsButton.addEventListener('click', button => {&nbsp; &nbsp; calculator.compute()&nbsp; &nbsp; calculator.updateDisplay()})allClearButton.addEventListener('click', button => {&nbsp; &nbsp; calculator.clear()&nbsp; &nbsp; calculator.updateDisplay()});deleteButton.addEventListener('click', button => {&nbsp; &nbsp; calculator.deleteFn()&nbsp; &nbsp; calculator.updateDisplay()});});*, *::before, *::after {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; font-family:Roboto;}body {&nbsp; &nbsp; padding:0;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; background-color: #80d4ff;}&nbsp;.calculator-grid {&nbsp; &nbsp; display:grid;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-content:center;&nbsp; &nbsp; grid-template-columns: repeat(4, 100px);&nbsp; &nbsp; grid-template-rows: minmax(120PX, auto) repeat(5, 100px);}.calculator-grid > button {&nbsp;&nbsp; &nbsp; cursor:pointer;&nbsp; &nbsp; font-size:2rem;&nbsp; &nbsp; border:1px solid #FF8900;&nbsp; &nbsp; outline:none;&nbsp; &nbsp; background-color:#0076FF;&nbsp; &nbsp; color:white;&nbsp; &nbsp; box-shadow:0px 5px #005DC9;}.calculator-grid > button:hover {&nbsp; &nbsp; background-color:#2B8DFF;}.calculator-grid > button:active {&nbsp; &nbsp; box-shadow:0 3px #005DC9;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; top:2px;&nbsp; &nbsp; text-shadow:0px 1px 3px white;}&nbsp;#glow-effect:active {&nbsp; &nbsp; &nbsp; &nbsp;color:#FF1C00;&nbsp; &nbsp; &nbsp; &nbsp;text-shadow:0px 1px 3px #FF1C00;}.span-two {&nbsp; &nbsp; grid-column: span 2;}.output {&nbsp; &nbsp; grid-column: 1/-1;&nbsp; &nbsp; background-color: #2B2B2B;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; align-items:flex-end;&nbsp; &nbsp; box-shadow:0px 5px black;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; word-wrap:word-break;&nbsp; &nbsp; word-break:break-all;&nbsp; &nbsp; color:white;}.current-operand {&nbsp; &nbsp; font-size:50px;}.current-operand:hover {&nbsp; &nbsp; cursor:pointer;}.previous-operand {&nbsp; &nbsp; font-size:25px;}&nbsp; &nbsp; &nbsp; &nbsp; <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="calculator-grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="output">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-previous-operand class="previous-operand">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-current-operand class="current-operand">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-all-clear class="span-two" id="glow-effect">Clear</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-delete>Delete</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-operation>÷</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>1</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>2</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>3</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-operation>×</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>4</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>5</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>6</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-operation>+</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>7</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>8</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>9</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-operation>-</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>.</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-number>0</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button data-equals class="span-two">=</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>