Web Dev 101 Javascript Calculator Project - Disable Buttons?


#1

Hey all!

I’m working through the Web Dev 101 Javascript Calculator project and am having some trouble.

When a user tries to divide by zero, I would like the calculator display text to read “you cannot divide by zero”. At this point, I would also like for all buttons except for the clear button to be disabled.

In my operate function I have a switch statement with a catch for when the user attempts to divide by zero. Currently, when the user clicks “=” after attempting to divide by zero, the clear function is called and the calculator display shows the intended message. I’ve also created a disableButtons function that triggers at this point. All buttons except for clear should be disabled. Then, once the user clicks “AC” all buttons should be re-enabled.

Here’s the problem: only the equals and delete button are disabled when the disableButtons function is called. The operations buttons and number buttons are not disabled, even though the function calls for it. I know this must have something to do with the fact that there are multiple buttons selected for under the operationButtons and numberButtons.

How can I disable all operation and number buttons? Can it be done while still displaying the intended text on the calculator display?

I’d greatly appreciate any help regarding this! Also, if there are any specific pages or videos that come to my mind that would help me have a better understanding of what’s going on here please send them my way.

Thanks! :slight_smile: Code below:

class Calculator {
    constructor (previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear();
     };

clear() {
    this.currentOperand = '';
    this.previousOperand = '';
    this.operation = undefined;
    this.previousOperandTextElement.innerText = this.previousOperand;
    equalsButton.disabled = false;
    deleteButton.disabled = false;
    operationButtons.disabled = false;
    numberButtons.disabled = false;
};

appendNumber(number) {
    if (number === '.' && this.currentOperand.includes('.')) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
};

delete () {
    this.currentOperand = this.currentOperand.toString().slice(0, -1);
};

chooseOperation(operation) {
    if (this.currentOperand === '') return;
    if (this.previousOperand !== '') {
        this.operate();
    }

    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = '';
}

operate () {
    let computation;
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;
    switch (this.operation) {
        case '+': 
        computation = prev + current;
        break;
        case '-': 
        computation = prev - current;
        break;
        case '*': 
        computation = prev * current;
        break;
        case '÷': 
        if (current === 0) {
        this.clear();
        this.disableButtons();
        this.currentOperand = 'You cannot divide by zero';
        
        return;
        }
        else if (current !== 0) {
        computation = prev / current;
        }
        break;
        default:
            return;
    }

    if (Number.isInteger(computation) === false) {
        computation = (Math.round( computation * 100 + Number.EPSILON ) / 100); 
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = '';
}

updateDisplay () {
    this.currentOperandTextElement.innerText = this.currentOperand;
    if (this.operation != null) {
    this.previousOperandTextElement.innerText = `${this.previousOperand} ${this.operation}`;
    }
}

disableButtons () {
    equalsButton.disabled = true;
    deleteButton.disabled = true;
    operationButtons.disabled = true;
    numberButtons.disabled = true;
}
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');

const calculator = new Calculator(previousOperandTextElement, 
currentOperandTextElement);

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.operate();
    calculator.updateDisplay();
})

allClearButton.addEventListener('click', button => {
    calculator.clear();
    calculator.updateDisplay();
})

deleteButton.addEventListener('click', button => {
    calculator.delete();
    calculator.updateDisplay();
})