运算符函数默认为 JavaScript 计算器项目中的第一个 if 语句

Operator function defaults to first if statement in JavaScript calculator project

我正在用 JavaScript 创建一个计算器，大多数函数都可以正常工作，但运算符函数每次都默认为第一个 if 语句（我将加法和减法切换来测试这个）。即，如果加法函数在我的运算符函数的第一个 if 语句中，则每个运算符按钮都会将数字相加，而不是减法、乘法等。

我尝试定义 o，但没有任何区别。我尝试删除参数，希望它能从以前的函数中提取 o 的值，这也没有什么不同。我在全球范围内声明了 o，所以我认为它会提取 o 的最新值，就像我的 a 和 b 变量。我不太确定是什么导致了这个问题，只是出于某种原因，它没有按照我的预期方式通过我的 if/else 陈述......也许它没有读取 o[ 的值=33=] 正确吗？

注意：我很肯定有一种更简洁的方法来编写这个代码，但我真的是编程新手，让它工作会很棒。

JS代码：

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代码：

<!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代码：

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

应该是

if (o == '-'){}

你现在所做的应该是给你一个错误。

=

待分配

==

是检查某物是否等于另一物

===

是检查某物是否严格相等，意思是

null == false

结果是真的

null === false

出来是假的