我正在制作一個計算器，但遇到了一些與 if/else 函式有關的問題，這給了我意想不到的結果。當我運行它時，邏輯似乎有點合理，所以我想在這里輸入一些我可能有錯誤的資訊。代碼給出了意想不到的結果expressionMaker，它似乎清除了第一個“if --> if”陳述句，但沒有其他陳述句。
編輯：感謝您的反饋。我已將問題縮小到這一部分。
else if ((EventTarget == numbers) && (expression.a > 0) && (expression.operand !== 0)) {
if (expression.b == 0) {
expression.b = keyValue
}
else {
expression.b = concat(expression.b, keyValue)
}
}
const btn = document.getElementById("calculatorGrid");
const display = document.getElementById("display");
const miniscreen = document.getElementById("miniScreen")
const equals = document.getElementById("evaluate")
const numbers = document.querySelectorAll(".Nbuttons");
const clear = document.getElementById("clear");
const add = document.getElementById("plus");
const sub = document.getElementById("subtract");
const multi = document.getElementById("multiply");
const divi = document.getElementById("divide");
const operators = document.querySelectorAll(".operators");
let nums = document.getElementById("nums")
numbers.values = nums.textContent
const calculate = (() => {
const add = (a, b) => a b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;
return {
add,
sub,
mul,
div,
};
});
const expression = {
a: 0,
operand: 0,
b: 0,
};
function expressionMaker(keyValue) {
const concat = (a, b) => {
return ("" a b)
};
if (EventTarget == numbers && expression.a == 0 || expression.operand == 0) {
if (expression.a == 0) {
expression.a = keyValue
}
else if (expression.a > 0) {
expression.a = concat(expression.a, keyValue)
}
display.innerHTML = expression.a
}
else if ((EventTarget == numbers) && (expression.a > 0) && (expression.operand !== 0)) {
if (expression.b == 0) {
expression.b = keyValue
}
else {
expression.b = concat(expression.b, keyValue)
}
}
else {
null
}
}
function evaluate() {
var result
if (expression.operand == " ") {
var result = calculate.add(expression.a, expression.b)
}
else if (expression.operand == "-") {
result = calculate.sub(expression.a, expression.b)
}
else if (expression.operand == "x") {
result = calculate.mul(expression.a, expression.b)
}
else if (expression.operand == "/") {
result = calculate.div(expression.a, expression.b)
}
else {
return null
}
display.innerHTML = result
return result
}
clear.addEventListener("click", () => {
clearOut()
})
equals.addEventListener("click", () => {
evaluate(expression.a, expression.b)
})
function setNums() {
let nums = document.getElementById("nums")
numbers.values = nums.textContent
};
setNums();
function clearOut() {
display.textContent = 0
expression.a = 0
expression.operand = 0
expression.b = 0
};
clear.addEventListener("click", function() {
clearOut();
});
add.addEventListener("click", () => {
expression.operand = " "
display.innerHTML = " "
})
sub.addEventListener("click", () => {
expression.operand = "-"
display.innerHTML = "-"
})
multi.addEventListener("click", () => {
expression.operand = "x"
display.innerHTML = "x"
})
divi.addEventListener("click", () => {
expression.operand = "/"
display.innerHTML = "/"
})
numbers.forEach(function(element) {
element.addEventListener("click", function(event) {
var key = event.target
let keyValue = key.textContent
expressionMaker(keyValue)
});
});<!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>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="display">
<div id="miniScreen"></div>
</div>
<div id="calculatorGrid">
<button class="Nbuttons" id="nums" data-number="1">1</button>
<button class="Nbuttons" id="nums" data-number="2">2</button>
<button class="Nbuttons" id="nums" data-number="3">3</button>
<button class="Nbuttons" id="nums" data-number="4">4</button>
<button class="Nbuttons" id="nums" data-number="5">5</button>
<button class="Nbuttons" id="nums" data-number="6">6</button>
<button class="Nbuttons" id="nums" data-number="7">7</button>
<button class="Nbuttons" id="nums" data-number="8">8</button>
<button class="Nbuttons" id="nums" data-number="9">9</button>
<button class="Nbuttons" id="nums" data-number="0">0</button>
<button class="operators" id="plus" data-operator=" "> </button>
<button class="operators" id="subtract" data-operator="-">-</button>
<button class="operators" id="multiply" data-operator="*">x</button>
<button class="operators" id="divide" data-operator="/">÷</button>
<button id="clear">clear</button>
<button id="evaluate"> =</button>
</div>
<script src="script.js" defer></script>
</body>
</html>uj5u.com熱心網友回復：
讓我們從頭開始，你可以用 4 個單獨的“addEventListener”替換這個函式，這樣會更容易混淆，更不容易出錯。
operators.forEach(function(element) {
element.addEventListener("click", function() {
if (EventTarget == add) {
expression.operand = " "
display.innerHTML = " "
}
else if (EventTarget == sub) {
expression.operand = "-"
display.innerHTML = "-"
}
else if (EventTarget == multi) {
expression.operand = "x"
display.innerHTML = "x"
}
else if (EventTarget == divi) {
expression.operand = "/"
display.innerHTML = "/"
}
})
})
新版本：
add.addEventListener("click", function() {
expression.operand = " ";
display.innerHTML = " ";
});
sub.addEventListener("click", function() {
expression.operand = "-";
display.innerHTML = "-";
});
multi.addEventListener("click", function() {
expression.operand = "x";
display.innerHTML = "x";
});
divi.addEventListener("click", function() {
expression.operand = "/";
display.innerHTML = "/";
});
“意外行為”的問題是我不確定你的邏輯試圖做什么，我唯一可以建議你看看這個：https ://developer.chrome.com/docs/devtools /javascript/你會在編碼時進行很多除錯，所以嘗試一下總是很棒的。
使用開發人員工具，您將能夠在每個步驟中查看每個變數的值，這將使您更容易找到事情的發展方向。
希望你讓它作業！
uj5u.com熱心網友回復：
我希望下面的答案適合你。
可能是您的元素具有重復的 id，例如 id="nums"
你也可以這樣完成..
const miniscreen = document.getElementById("miniScreen");
function clearValue(){
miniscreen.innerHTML=0;
}
function mini(param){
if(miniscreen.innerHTML==0){
miniscreen.innerHTML=param;
}else{
miniscreen.innerHTML =param;
}
}
function calculate(){
miniscreen.innerHTML=eval(miniscreen.innerHTML);
}<body>
<div id="display">
<div id="miniScreen">0</div>
</div>
<div id="calculatorGrid">
<button class="Nbuttons" onclick="mini('1')" data-number="1">1</button>
<button class="Nbuttons" onclick="mini('2')" data-number="2">2</button>
<button class="Nbuttons" onclick="mini('3')" data-number="3">3</button>
<button class="Nbuttons" onclick="mini('4')">4</button>
<button class="Nbuttons" onclick="mini('5')">5</button>
<button class="Nbuttons" onclick="mini('6')">6</button>
<button class="Nbuttons" onclick="mini('7')">7</button>
<button class="Nbuttons" onclick="mini('8')">8</button>
<button class="Nbuttons" onclick="mini('9')">9</button>
<button class="Nbuttons" onclick="mini('0')">0</button>
<button class="operators" id="plus" onclick="mini(' ')"> </button>
<button class="operators" id="subtract" onclick="mini('-')">-</button>
<button class="operators" id="multiply" onclick="mini('*')">x</button>
<button class="operators" id="divide" onclick="mini('/')">÷</button>
<button id="clear" onclick="clearValue()">clear</button>
<button id="evaluate" onclick="calculate()"> =</button>
</div>
</body>謝謝你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/527310.html