使"全部清除"按钮在计算器上工作

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>