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

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>