I’m creating a calculator with JavaScript and most functions are working properly, but the operator function defaults to the first if statement each time (I switched add with subtract to test this). i.e. if the add function is in the first if statement of my operator function, every operator button will add the numbers instead of subtract, multiply, etc.

I tried defining o, which didn’t make a difference. I tried removing the parameters, hoping that it would pull the value of o from the previous functions, which also didn’t make a difference. I have o declared globally, so I thought it would pull the latest value of o like it does with my a and b variables. I’m not quite sure what is causing the issue, just that for whatever reason it’s not making it through my if/else statements the way I intended…maybe it’s not reading the value of o correctly?

Note: I’m positive there is a much more concise way to code this, but I’m really new to programming and just getting it to work will be great.

JS code:

let clearBtn = document.getElementById('clearBtn');
let posNegBtn = document.getElementById('posNegBtn');
let divideBtn = document.getElementById('divideBtn');
let multiplyBtn = document.getElementById('multiplyBtn');
let subtractBtn = document.getElementById('subtractBtn');
let addBtn = document.getElementById('addBtn');
let equalBtn = document.getElementById('equalBtn');
let zero = document.getElementById('zero');
let decimalBtn = document.getElementById('decimalBtn');
let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let display = document.getElementById('display');

let a = 0;
let b = 0;
let o;
let currentNum;

clearBtn.addEventListener('click', clearDisplay);
posNegBtn.addEventListener('click', changePosNeg);
divideBtn.addEventListener('click', dividePressed);
multiplyBtn.addEventListener('click', multiplyPressed);
subtractBtn.addEventListener('click', subtractPressed);
addBtn.addEventListener('click', addPressed);
equalBtn.addEventListener('click', equalPressed);
zero.addEventListener('click', displayZero);
decimalBtn.addEventListener('click', displayDec);
one.addEventListener('click', display1);
two.addEventListener('click', display2);
three.addEventListener('click', display3);
four.addEventListener('click', display4);
five.addEventListener('click', display5);
six.addEventListener('click', display6);
seven.addEventListener('click', display7);
eight.addEventListener('click', display8);
nine.addEventListener('click', display9);

function clearDisplay() {
    display.value = '0';
    currentNum = display.value;
}

function displayZero() {
    display.value += '0';
    currentNum = display.value;
}

function displayDec() {
    if (display.value.includes('.')) {
        display.value;
    } else {
        display.value += '.';
    }   
    currentNum = display.value;
}

function changePosNeg() {
    parseFloat(display.value *= -1);
    currentNum = display.value;
}

function display1() {
    if (display.value == '0') {
        display.value ='1';
    } else {
        display.value += '1';
    } 
    currentNum = display.value;
}

function display2() {
    if (display.value == '0') {
        display.value ='2';
    } else {
        display.value += '2';
    } 
    currentNum = display.value;
}

function display3() {
    if (display.value == '0') {
        display.value ='3';
    } else {
        display.value += '3';
    } 
    currentNum = display.value;
}

function display4() {
    if (display.value == '0') {
        display.value ='4';
    } else {
        display.value += '4';
    } 
    currentNum = display.value;
}

function display5() {
    if (display.value == '0') {
        display.value ='5';
    } else {
        display.value += '5';
    } 
    currentNum = display.value;
}

function display6() {
    if (display.value == '0') {
        display.value = '6';
    } else {
        display.value += '6';
    } 
    currentNum = display.value;
}

function display7() {
    if (display.value == '0') {
        display.value = '7';    
    } else {
        display.value += '7';
    } 
    currentNum = display.value;
}

function display8() {
    if (display.value == '0') {
        display.value = '8';
    } else {
        display.value += '8';
    } 
    currentNum = display.value;
}

function display9() {
    if (display.value == '0') {
        display.value = '9';
    } else {
        display.value += '9';
    } 
    currentNum = display.value;
}

function addPressed() {
    display.value = '';
    a = parseFloat(`${currentNum}`);
    o = '+';
}

function subtractPressed() {
    display.value = '';
    a = parseFloat(`${currentNum}`);
    o = '-';
}

function multiplyPressed() {
    o = 'x';
    display.value = '';
    a = parseFloat(`${currentNum}`);
}

function dividePressed() {
    o = '/';
    display.value = '';
    a = parseFloat(`${currentNum}`);
}

function equalPressed() {
    b = parseFloat(`${currentNum}`);
    operate(o, a, b);
}

function add(a, b) {
    display.value = a + b;
    currentNum = display.value;
}

function subtract(a, b) {
    display.value = a - b;
    currentNum = display.value;
}

function multiply(a, b) {
    display.value = a * b;
    currentNum = display.value;
}

function divide(a, b) {
    display.value = a / b;
    currentNum = display.value;
}

function operate(o, a, b) {
    if (o = '-') {
        return subtract(a, b);
    } else if (o = '+') {
        return add(a, b);
    } else if (o = '*') {
        return multiply(a, b);
    } else if (o = '/') {
        return divide(a, b);
    }

}

HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>

    <body>
        <div class="container">
            <div id="calculator">
                <input id="display" type="text" value="0">
                <div id="buttons">
                    <div id="mainBtns">
                        <div id="otherBtns">
                            <button id="clearBtn">AC</button>
                            <button id="posNegBtn">+/-</button>
                        </div>
                        <div id="numBtns">
                            <button id="seven">7</button>
                            <button id="eight">8</button>
                            <button id="nine">9</button>
                            <button id="four">4</button>
                            <button id="five">5</button>
                            <button id="six">6</button>
                            <button id="one">1</button>
                            <button id="two">2</button>
                            <button id="three">3</button>
                            <button id="zero">0</button>
                            <button id="decimalBtn">.</button>
                        </div>
                    </div>
                    <div id="operators">
                        <button id="divideBtn">/</button>
                        <button id="multiplyBtn">x</button>
                        <button id="subtractBtn">-</button>
                        <button id="addBtn">+</button>
                        <button id="equalBtn">=</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS code:

.container {
    display: flex;
    flex-direction: column;
}

#calculator {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 330px;
    border: 15px solid black;
    background-color: black;
    gap: 20px;
}

#display {
    background-color: gray;
    height: 60px;
    text-align: right;
    font-size: 50px;
}

#buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

#operators {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#divideBtn, #multiplyBtn, #subtractBtn, #addBtn, #equalBtn {
    width: 40px;
    height: 40px;
    background-color: chartreuse;
}

#mainBtns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#numBtns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px 10px;
}

#otherBtns {
    display: flex;
    gap: 10px;
    justify-content: space-around;
}
 
#nine, #eight, #seven, #six, #five, #four, #three, #two, #one, 
#decimalBtn, #posNegBtn {
    width: 40px;
    height: 40px;
} 

#zero, #clearBtn {
    width: 93px;
}

#clearBtn, #posNegBtn {
    background-color: aqua;
}

>Solution :

It should be

if (o == '-'){}

What you’re doing now should be giving you an error.

=

is for assignment

== 

is to check if something is equal to something else

=== 

is to check if something is strictly equal, meaning

null == false

comes out to true

null === false 

comes out to false