我正在嘗試使用.push() 將值推送到數組中，但是一旦數組長度達到兩個，它就會停止推送值

Question

我正在嘗試為 Odin 項目創建一個 javascript 計算器。 在用頭撞鍵盤幾個小時后，我終於覺得自己取得了一些進步，然后出現了這個奇怪的錯誤。

在 function 中，我將事件偵聽器添加到操作員按鈕，我試圖將當前操作員（最后一個被單擊的操作員）推送到一個數組，該數組跟蹤已單擊的操作員按鈕（'newOperators.push( e.target.innerText)')。

如果我向操作員按鈕發送垃圾郵件，它會很好地推送到陣列。 但是當我試圖將一系列操作鏈接在一起時， newOperators.push() 方法似乎在數組長度達到兩個后退出。

為了測試，我添加了另一個虛擬數組並使用另一個 push() 方法將字母推到它上面，我把它放在 newOperators.push() 上面的行上，這似乎工作得很好。 我嘗試將 newOperators.push() 切換為 newOperators.unshift() 並且有同樣的問題。

在這里失去理智，任何幫助將不勝感激！

Javascript：

let display = document.querySelector('.display');
let title = document.querySelector('.title');


let plus = document.querySelector('.plus');
let minus = document.querySelector('.minus');
let times = document.querySelector('.multiply');
let divide = document.querySelector('.divide');
let equal = document.querySelector('.equal');
let period = document.querySelector('.period');

let one = document.querySelector('.one');
let two = document.querySelector('.two');
let three = document.querySelector('.three');
let four = document.querySelector('.four');
let five = document.querySelector('.five');
let six = document.querySelector('.six');
let seven = document.querySelector('.seven');
let eight = document.querySelector('.eight');
let nine = document.querySelector('.nine');
let nought = document.querySelector('.nought');

let buttons = document.querySelectorAll('button');
let operators = document.querySelectorAll('.operator');
let numbers = document.querySelectorAll('.number');


let currentCalc = [];

let currentOp = '';



let firstNumber = 0;
let secondNumber = 0;
let thirdNumber = 0;

let firstStash = 0;
let secondStash = 0;
let total = 0;

let calculated = false;
let newOperators = [];

const add = function(a,b) {
    return a + b;
};

const subtract = function(a,b) {
    return a - b;
};

const multiply = function(a,b) {
    return a * b
};
const division = function(a,b) {
    return a / b
};




function operate(fnum,snum, op) {
    if(op === '+') {
        let sum = add(fnum,snum);
        return sum;
    } else if(op === '-') {
        let sum = subtract(fnum,snum);
        return sum;
    } else if(op === 'x') {
        let sum = multiply(fnum,snum);
        return sum;
    } else if(op === '/') {
        let sum = division(fnum,snum);
        return sum;
    }
}

let fNumArr = [];
let sNumArr = [];
let tNumArr = [];

numbers.forEach((e) => {
    e.addEventListener('click', (e) => {
            console.log('numberFunc', newOperators)
            if(newOperators.length < 1) {
                fNumArr.push(e.target.innerText)
                firstNumber = parseInt(fNumArr.join(''));
                console.log('first',firstNumber);
                display.textContent = firstNumber;
            } else if( newOperators.length = 1) {
                
                sNumArr.push(e.target.innerText);
                secondNumber = parseInt(sNumArr.join(''));
                console.log('second',secondNumber);
                display.textContent = secondNumber;
                
            } else if(newOperators.length > 1) {

            tNumArr.push(e.target.innerText);
            thirdNumber = parseInt(tNumArr.join(''));
            console.log('third',thirdNumber);
            display.textContent = thirdNumber;

        }  
    })
})

operators.forEach((e) => {
    e.addEventListener('click', (e) => {
        console.log(currentOp)
        newOperators.push(e.target.innerText);
        console.log('topOfOp',newOperators)
        display.innerText = '';
            if(newOperators.length === 1) {
   
            } else if(newOperators.length === 2) {
                console.log(operate(firstNumber,secondNumber,newOperators[1]));
                total = operate(firstNumber,secondNumber,newOperators[1]);
    
                display.innerText = total;
                firstNumber = total;
                secondNumber = 0;
                fNumArr = [];
                fNumArr.push(total)
                sNumArr = [];
             
            }
    })
})

HTML：

<!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">
    <title>Caculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js" defer></script>
</head>
<body>
    <h1 class="title">Calculator</h1>
    <div class="container">
        <div class="calculator">
            <div class="display">This will print result</div>
            <button class="clear">Clear</button>
            <button class="plus operator">+</button>
            <button class="minus operator">-</button>
            <button class="multiply operator">x</button>
            <button class="divide operator">/</button>
            <button class="equal ">=</button>
            <button class="one number">1</button>
            <button class="two number">2</button>
            <button class="three number">3</button>
            <button class="four number">4</button>
            <button class="five number">5</button>
            <button class="six number">6</button>
            <button class="seven number">7</button>
            <button class="eight number">8</button>
            <button class="nine number">9</button>
            <button class="nought number">0</button>
            <button class="period number">.</button>
        </div>
    </div>
</body>
</html>

Answer 1

在您的 numbers.forEach 循環中，您犯了以下錯誤： if( newOperators.length = 1)您應該解決這個問題。 另外，在您剛開始時有一點建議（我也在開始 WebDev）：

即使變量太長，您也應該清楚地命名變量。
將您的代碼重構為函數和文件，例如制作它，以便您將回調傳遞給事件偵聽器並擺脫重復的代碼。 記住保持干燥（不要重復你的代碼）

我正在嘗試使用.push() 將值推送到數組中，但是一旦數組長度達到兩個，它就會停止推送值

問題描述

1 個解決方案

解決方案1
0 2022-09-11 23:00:01

我正在嘗試使用.push() 將值推送到數組中，但是一旦數組長度達到兩個，它就會停止推送值

問題描述

1 個解決方案

解決方案1 0 2022-09-11 23:00:01

解決方案1
0 2022-09-11 23:00:01