Включение кнопки «Очистить все» на калькуляторе - PullRequest
Новая
       14

Включение кнопки «Очистить все» на калькуляторе

1 голос
/ 21 марта 2020

Я пытаюсь заставить работать кнопку очистки на калькуляторе, но по какой-то причине мне нужно нажать кнопку "=", чтобы это работало, может кто-нибудь помочь, функция, которая должна заставить это работать находится внизу страницы.

Калькулятор

1 Ответ

3 голосов
/ 21 марта 2020

Опечатка: 

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>
...