使所有清除按鈕在計算器上工作

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 { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement; this.currentOperandTextElement = currentOperandTextElement; } clear() { this.currentOperand = ''; this.previousOperand = ''; this.operation = undefined; } deleteFn() { this.currentOperand = this.currentOperand.slice(0, -1) } appendNumber(number) { if (number === '.' && this.currentOperand.includes('.')) return; this.currentOperand = this.currentOperand.toString() + number.toString(); } chooseOperation(operation) { if (this.currentOperand === '') return if (this.previousOperand !== '') { this.compute() } this.operation = operation; this.previousOperand = this.currentOperand this.currentOperand = '' } compute() { let computation const prev = parseFloat(this.previousOperand) const current = parseFloat(this.currentOperand) if(isNaN(prev)) isNaN(current) switch(this.operation) { case '+': computation = prev + current break case '-': computation = prev - current break case '×': computation = prev * current break case '÷': computation = prev / current break default: return } this.currentOperand = computation this.operation = undefined this.previousOperand = '' } updateDisplay() { this.currentOperandTextElement.innerText = this.currentOperand; this.previousOperandTextElement.innerText = this.previousOperand; } } 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 => { 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.deleteFn() calculator.updateDisplay() }); });

 *, *::before, *::after { box-sizing: border-box; font-family:Roboto; } body { padding:0; margin:0; background-color: #80d4ff; } .calculator-grid { display:grid; justify-content: center; align-content:center; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120PX, auto) repeat(5, 100px); } .calculator-grid > button { cursor:pointer; font-size:2rem; border:1px solid #FF8900; outline:none; background-color:#0076FF; color:white; box-shadow:0px 5px #005DC9; } .calculator-grid > button:hover { background-color:#2B8DFF; } .calculator-grid > button:active { box-shadow:0 3px #005DC9; position:relative; top:2px; text-shadow:0px 1px 3px white; } #glow-effect:active { color:#FF1C00; text-shadow:0px 1px 3px #FF1C00; } .span-two { grid-column: span 2; } .output { grid-column: 1/-1; background-color: #2B2B2B; display:flex; align-items:flex-end; box-shadow:0px 5px black; justify-content: space-between; flex-direction: column; padding:10px; word-wrap:word-break; word-break:break-all; color:white; } .current-operand { font-size:50px; } .current-operand:hover { cursor:pointer; } .previous-operand { font-size:25px; }

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <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" id="glow-effect">Clear</button> <button data-delete>Delete</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>