本地/全局 scope 和 NAN 問題

Question

好的，我有以下代碼來創建一個計算器：

const numbers = document.querySelector('.numbers')
const display = document.querySelector('.display')
const functions = document.querySelector('.functions')
const equalClear = document.querySelector('.equalClear')

numbers.addEventListener('click', e => {
    // selecting and adding nr to display
   if(e.target.innerHTML == '1'){
       display.innerHTML += '1';
   }else if (e.target.innerHTML == '2'){
       display.innerHTML += '2';
   }else if (e.target.innerHTML == '3'){
    display.innerHTML += '3';
}else if (e.target.innerHTML == '4'){
    display.innerHTML += '4';
}else if (e.target.innerHTML == '5'){
    display.innerHTML += '5';
}else if (e.target.innerHTML == '6'){
    display.innerHTML += '6';
}else if (e.target.innerHTML == '7'){
    display.innerHTML += '7';
}else if (e.target.innerHTML == '8'){
    display.innerHTML += '8';
}else if (e.target.innerHTML == '9'){
    display.innerHTML += '9';
}else if (e.target.innerHTML == '0'){
    display.innerHTML += '0';
}
});

functions.addEventListener('click', e => {
    // selecting a function and adding it to the display
    if(e.target.innerHTML == 'Add'){
        display.innerHTML += '+';
        functionVal = add();
    } else if(e.target.innerHTML == 'Subtract'){
        display.innerHTML += '-';
        functionVal = subtract();
    } else if(e.target.innerHTML == 'Multiply'){
        display.innerHTML += '*';
        functionVal = multiply()
    } else if(e.target.innerHTML == 'Divide'){
        display.innerHTML += '/';
        functionVal = divide();
    }else{
        display.innerHTML + 'Error'
    }
    numberVal = display.innerText; //creating variable with value of nr in display
    console.log(numberVal, "numberVal");
    console.log(functionVal, "functionVal");
});

equalClear.addEventListener('click', e => {
    if(e.target.innerHTML === 'Clear'){
        display.innerHTML = "";
    } 
    else if(e.target.innerHTML = '='){
    }
})

//functions for calculator

function add(variable1, variable2) {
    return variable1 + variable2;
};

function subtract(variable1, variable2) {
    return variable1 - variable2;
}

function multiply(variable1, variable2) {
    return variable1 * variable2;
};

function divide(variable1, variable2) {
    return variable1 / variable2;
}

// operation in calculator

function operate(operator, num1, num2){
   operate = operator, num1, num2;
}

operate(functionVal(numberVal,5))
console.log(operate, "this is an operation");

我在“functions.addEventListener”中定義了“functionVal”和“numberVal”。 但是，當我嘗試在代碼底部的“操作”function 中調用它們時，我發現“functionVal”和“numberVal”未定義。 我知道這是因為它在“functions.addEventListener”function 中的本地 scope 中，我嘗試在代碼塊之前為它們中的每一個添加一個“var”，以便為它們提供全局 scope。但它只是不會工作，我會有點瘋狂地試圖找出如何能夠在我的“操作”function 中調用它們。

此外，當我在“functions.AddEventListener”的“console.log”中調用“functionVal”時，我得到“functionVal”是 NAN，我知道它“不是數字”，但它不應該顯示我實際的 function賦予它價值嗎？ 我已經設置，如果你在 HTML 中按“add”，“functionVal”的值變成我在代碼底部定義的“add”function。 我不確定這里出了什么問題，所以非常感謝您的幫助。

在“操作”function 中，我將第二個參數的值設置為 5 只是為了測試，但一旦我能夠解決問題，就會在顯示中添加實際的“第二個數字”。

感謝您的幫助！

親切的問候，一個 JS 菜鳥

Answer 1

好吧，起初，這真的不好，為什么你要檢查相等性（並對相同類型使用===運算符）：

numbers.addEventListener('click', e => {
    // selecting and adding nr to display
   if(e.target.innerHTML == '1'){
       display.innerHTML += '1';
   }else if (e.target.innerHTML == '2'){
       display.innerHTML += '2';
   }else if (e.target.innerHTML == '3'){
    display.innerHTML += '3';
}else if (e.target.innerHTML == '4'){
    display.innerHTML += '4';
}else if (e.target.innerHTML == '5'){
    display.innerHTML += '5';
}else if (e.target.innerHTML == '6'){
    display.innerHTML += '6';
}else if (e.target.innerHTML == '7'){
    display.innerHTML += '7';
}else if (e.target.innerHTML == '8'){
    display.innerHTML += '8';
}else if (e.target.innerHTML == '9'){
    display.innerHTML += '9';
}else if (e.target.innerHTML == '0'){
    display.innerHTML += '0';
}
});

你可以這樣重寫它：

numbers.addEventListener('click', e => { 
    display.innerHTML += e.target.innerHTML;
}

如果我理解正確， numbers必須是帶有數字的按鈕數組，但querySelector只返回第一次出現，所以它只會返回第一個按鈕。 您應該使用querySelectorAll並像這樣重寫它：

const numbersButtons = document.querySelectorAll('.numbers');
// convert to array, because we can't iterate over querySelectorAll result
Array.from(numbersButtons).forEach((button,index) => {
    button.addEventListener('click', e => {
        display.innerHTML += e.target.innerHTML;
    }
});

函數，概率，也必須是一個數組，你可以使代碼更清晰，例如使用 map 函數：

const functionsMap = {
    '+': add,
    '-': subtract
    // and other functions..
}

並這樣稱呼他們：

// will return add function
const targetFunc = functionsMap['+'];
// call with parameters
targetFunc(1,2);

是的，當你這樣做的時候：

 functionVal = divide();

您不傳遞對 function 的引用，而是執行它，因此functionVal將存儲 function 執行的結果，是的，它會返回NaN ，因為您在沒有參數的情況下執行它，請在控制台中嘗試：

function add (a,b){return a + b}
console.log(add());

還有很多錯誤，我就不分析了，所以我勸你go回到最開始的地方，好好把握自己的所作所為。