JavaScript Switch Statement not matching cases as expected-CodePudding

I am creating a calculator app using HTML, CSS, and JS as my stack. When the user presses an operand, it is stored within the operand variable. When the user presses the ENTER button, the equation is solved. By using a switch statement, I want to use the operand variable to match a case and do execute the code accordingly.

However, my switch statement is not properly matching my cases properly and I'm not sure why.

// Initializing all variables
const currentDisplay = document.querySelector(".current");
const previousDisplay = document.querySelector(".previous");

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');

const clearButton = document.querySelector(".clear");
const deleteButton = document.querySelector(".delete");
const enterButton = document.querySelector(".enter");
const pointButton = document.querySelector(".point");


let firstNumber;
let secondNumber;
let operand;
let answer;

// Adding event listeners to all buttons
clearButton.addEventListener('click', clearAll);
enterButton.addEventListener('click', enter);

numberButtons.forEach(button => 
    button.addEventListener('click', () => {
        /* 
        Checks if firstNumber is assigned yet.

        If firstNumber & operand is undefined, just assign value of button to firstNumber.

        If firstNumber has a value assigned and the operand is undefined, that means they pressed a number button already, append and reassign to firstNumber.

        Else they have already inputted the firstNumber and an operand. This means expect a second number to begin arithemtic.
        */

        if (isUndefined(firstNumber) && isUndefined(operand)) { 
            firstNumber = button.textContent; 
            currentDisplay.textContent = firstNumber;
        } else if (!isUndefined(firstNumber) && isUndefined(operand)) {
            appendToCurrent(button.textContent);
            firstNumber = currentDisplay.textContent;
        } else if (!isUndefined(secondNumber) && !isUndefined(operand)) {
            appendToCurrent(button.textContent);
            secondNumber = currentDisplay.textContent;
        } else {
            secondNumber = button.textContent;
            currentDisplay.textContent = secondNumber;
        }
}));

operationButtons.forEach(button => 
    button.addEventListener('click', () => {
        /*
        Checks if there is the operand & firstNumber has been assigned yet.

        If both the operand and firstNumber is undefined, then they are trying to do some sort of arithemtic with zero (aka the starting value).

        If the operand is undefined but the firstNumber isn't, that means the user has finished inputting their number and are moving onto an arithmetic operation. 
        */

        if (isUndefined(operand) && !isUndefined(firstNumber)) {
            operand = button.textContent;
            appendToPrevious(button.textContent);
        }

        if (isUndefined(operand) && isUndefined(firstNumber)) {
            operand = button.textContent;
            appendToPrevious(button.textContent);
        }
}));


function appendToCurrent(number) {
    currentDisplay.textContent  = number
}

function appendToPrevious(op) {
    /* 
    Takes in a button (which contains the operand) and assigns it to the 'operand' variable. Moves currentDisplay to previousDisplay while appending the operand to it. Afterwards, clear the currentDisplay readying it for new user input.
    */

    previousDisplay.textContent = currentDisplay.textContent; 
    previousDisplay.textContent  = op;
    clear(currentDisplay);
}

function isUndefined(variable) {
    return variable === undefined;
}

function del() {
    
}

function enter() {
    console.log(operand   (typeof operand));
    switch (operand) {
        case " ":
            console.log("Case: Addition");
            answer = add(firstNumber, secondNumber);
            currentDisplay.textContent = answer;
            break;
        case "-":
            console.log("Case: Subtraction");
            subtract(firstNumber, secondNumber);
            break;
        case "/":
            console.log("Case: Division");
            divide(firstNumber, secondNumber);
            break;
        case "*":
            console.log("Case: Multiplication");
            multiply(firstNumber, secondNumber);
            break;
        default:
            console.log("Case: Default");
            previousDisplay.textContent = firstNumber   operand   secondNumber;
            break;
    }
}

function clearAll() {
    currentDisplay.textContent = 0;
    previousDisplay.textContent = ' ';

    firstNumber = undefined;
    secondNumber = undefined;
    operand = undefined;

    console.clear();
}

function clear(display) {
    display.textContent = ' ';
}

function add(x, y) {
    return x   y;
}

function subtract(x, y) {
    return x - y;
}

function multiply(x, y) {
    return x * y;
}

function divide (x, y) {
    return x / y;
}

/* #EEC61F */

* {
    padding: 0;
    margin: 0;
    font-family: 'Fira Code';
}

head {
    display: none;
}

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: lightgray;
}

/* Main app */
.app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    padding: 20px;
}

.calculator {
    width: 400px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px;
    background-color: gray;
}

.display {
    background-color: whitesmoke;
    text-align: right;
    word-break: break-all;

    padding: 10px 20px;
    margin-bottom: 30px;

    border: 1.5px solid black;
    border-radius: 10px;
}

.current {
    padding: 10px;
    font-size: 2em;
}

.previous {
    padding: 10px;
    font-size: 1em;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 20px;
}

#button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    border: 1px solid black;
    border-radius: 3px;
    background-color: whitesmoke;
}

.zero {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 5;
}

.enter {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 6;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="https://fonts.google.com/specimen/Fira Code?vfquery=fira">
        <script src="script.js" defer></script>
        <title>Calculator</title>
    </head>

    <body>
        <div >
            <div >
                <div >
                    <div ></div>
                    <div > 0 </div>
                </div>
                <div >
                    <button id="button" >
                        <h3> CLEAR </h3>
                    </button>
                    <button id="button" data-operation>
                        <h3> / </h3>
                    </button>
                    <button id="button" data-operation>
                        <h3> * </h3>
                    </button>
                    <button id="button" >
                        <h3> ⌫ </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 7 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 8 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 9 </h3>
                    </button>
                    <button id="button" data-operation="">
                        <h3> - </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 4 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 5 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 6 </h3>
                    </button>
                    <button id="button" data-operation> 
                        <h3>   </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 1 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 2 </h2> 
                    </button>
                    <button id="button" data-number>
                        <h3> 3 </h3>
                    </button>
                    <button id="button" >
                        <h3> ENTER </h3>
                    </button>
                    <button id="button"  data-number>
                        <h3> 0 </h3>
                    </button>
                    <button id="button" >
                        <h3> . </h3>
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

you need to trim operand value to remove empty spaces

// Initializing all variables
const currentDisplay = document.querySelector(".current");
const previousDisplay = document.querySelector(".previous");

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');

const clearButton = document.querySelector(".clear");
const deleteButton = document.querySelector(".delete");
const enterButton = document.querySelector(".enter");
const pointButton = document.querySelector(".point");


let firstNumber;
let secondNumber;
let operand;
let answer;

// Adding event listeners to all buttons
clearButton.addEventListener('click', clearAll);
enterButton.addEventListener('click', enter);

numberButtons.forEach(button => 
    button.addEventListener('click', () => {
        /* 
        Checks if firstNumber is assigned yet.

        If firstNumber & operand is undefined, just assign value of button to firstNumber.

        If firstNumber has a value assigned and the operand is undefined, that means they pressed a number button already, append and reassign to firstNumber.

        Else they have already inputted the firstNumber and an operand. This means expect a second number to begin arithemtic.
        */

        if (isUndefined(firstNumber) && isUndefined(operand)) { 
            firstNumber = button.textContent; 
            currentDisplay.textContent = firstNumber;
        } else if (!isUndefined(firstNumber) && isUndefined(operand)) {
            appendToCurrent(button.textContent);
            firstNumber = currentDisplay.textContent;
        } else if (!isUndefined(secondNumber) && !isUndefined(operand)) {
            appendToCurrent(button.textContent);
            secondNumber = currentDisplay.textContent;
        } else {
            secondNumber = button.textContent;
            currentDisplay.textContent = secondNumber;
        }
}));

operationButtons.forEach(button => 
    button.addEventListener('click', () => {
        /*
        Checks if there is the operand & firstNumber has been assigned yet.

        If both the operand and firstNumber is undefined, then they are trying to do some sort of arithemtic with zero (aka the starting value).

        If the operand is undefined but the firstNumber isn't, that means the user has finished inputting their number and are moving onto an arithmetic operation. 
        */

        if (isUndefined(operand) && !isUndefined(firstNumber)) {
            operand = button.textContent;
            appendToPrevious(button.textContent);
        }

        if (isUndefined(operand) && isUndefined(firstNumber)) {
            operand = button.textContent;
            appendToPrevious(button.textContent);
        }
}));


function appendToCurrent(number) {
    currentDisplay.textContent  = number
}

function appendToPrevious(op) {
    /* 
    Takes in a button (which contains the operand) and assigns it to the 'operand' variable. Moves currentDisplay to previousDisplay while appending the operand to it. Afterwards, clear the currentDisplay readying it for new user input.
    */

    previousDisplay.textContent = currentDisplay.textContent; 
    previousDisplay.textContent  = op;
    clear(currentDisplay);
}

function isUndefined(variable) {
    return variable === undefined;
}

function del() {
    
}

function enter() {
    console.log(operand   (typeof operand));
    switch (operand.trim()) {
        case " ":
            console.log("Case: Addition");
            answer = add(firstNumber, secondNumber);
            currentDisplay.textContent = answer;
            break;
        case "-":
            console.log("Case: Subtraction");
            subtract(firstNumber, secondNumber);
            break;
        case "/":
            console.log("Case: Division");
            divide(firstNumber, secondNumber);
            break;
        case "*":
            console.log("Case: Multiplication");
            multiply(firstNumber, secondNumber);
            break;
        default:
            console.log("Case: Default");
            previousDisplay.textContent = firstNumber   operand   secondNumber;
            break;
    }
}

function clearAll() {
    currentDisplay.textContent = 0;
    previousDisplay.textContent = ' ';

    firstNumber = undefined;
    secondNumber = undefined;
    operand = undefined;

    console.clear();
}

function clear(display) {
    display.textContent = ' ';
}

function add(x, y) {
    return x   y;
}

function subtract(x, y) {
    return x - y;
}

function multiply(x, y) {
    return x * y;
}

function divide (x, y) {
    return x / y;
}

/* #EEC61F */

* {
    padding: 0;
    margin: 0;
    font-family: 'Fira Code';
}

head {
    display: none;
}

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: lightgray;
}

/* Main app */
.app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    padding: 20px;
}

.calculator {
    width: 400px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px;
    background-color: gray;
}

.display {
    background-color: whitesmoke;
    text-align: right;
    word-break: break-all;

    padding: 10px 20px;
    margin-bottom: 30px;

    border: 1.5px solid black;
    border-radius: 10px;
}

.current {
    padding: 10px;
    font-size: 2em;
}

.previous {
    padding: 10px;
    font-size: 1em;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 20px;
}

#button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    border: 1px solid black;
    border-radius: 3px;
    background-color: whitesmoke;
}

.zero {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 5;
}

.enter {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 6;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="https://fonts.google.com/specimen/Fira Code?vfquery=fira">
        <script src="script.js" defer></script>
        <title>Calculator</title>
    </head>

    <body>
        <div >
            <div >
                <div >
                    <div ></div>
                    <div > 0 </div>
                </div>
                <div >
                    <button id="button" >
                        <h3> CLEAR </h3>
                    </button>
                    <button id="button" data-operation>
                        <h3> / </h3>
                    </button>
                    <button id="button" data-operation>
                        <h3> * </h3>
                    </button>
                    <button id="button" >
                        <h3> ⌫ </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 7 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 8 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 9 </h3>
                    </button>
                    <button id="button" data-operation="">
                        <h3> - </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 4 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 5 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 6 </h3>
                    </button>
                    <button id="button" data-operation> 
                        <h3>   </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 1 </h3>
                    </button>
                    <button id="button" data-number>
                        <h3> 2 </h2> 
                    </button>
                    <button id="button" data-number>
                        <h3> 3 </h3>
                    </button>
                    <button id="button" >
                        <h3> ENTER </h3>
                    </button>
                    <button id="button"  data-number>
                        <h3> 0 </h3>
                    </button>
                    <button id="button" >
                        <h3> . </h3>
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>