简单计算器项目的意外输出

输入示例(1+2=(的以下程序的预期输出：

console.log(currentNumber(=1
console.log(currentOperator(=+
console.log(nextNumber(=2
console.log(operatorActive(=false

然而，我得到了：

console.log(currentNumber(=2***
console.log(currentOperator(=+
console.log(nextNumber(=未定义***
console.log(operatorActive(=false

***=意外输出

一旦我输入这些值，我就试图让计算器说3。显然，console.log显示的情况并非如此。我似乎搞不清我的代码出了什么问题。非常感谢您的帮助。

// Functions for calculation (+, -, *, /)
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
const operate = (operator, a, b) => {
switch (operator) {
case "+":
return add(a, b);
case "-":
return subtract(a, b);
case "×":
return multiply(a, b);
case "÷":
return divide(a, b);
}
};
// DOM selection of UI buttons and display
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
const equals = document.querySelector(".equals");
const display = document.querySelector(".output");
// Functions for event listeners when buttons clicked...
let currentNumber;
let currentOperator;
let nextNumber;
let operatorActive = false;
// ... for numerical buttons
function clickNumber() {
numbers.forEach((number) => {
if (!operatorActive) {
number.addEventListener('click', () => {
display.textContent += number.textContent;
currentNumber = display.textContent;
})
} else if (operatorActive) {
number.addEventListener('click', () => {
display.textContent += number.textContent;
nextNumber = display.textContent;
})
}
});
}
// ... for operator buttons
function clickOperator() {
operators.forEach((operator) => {
operator.addEventListener('click', () => {
currentOperator = operator.textContent;
display.textContent = "";
operatorActive = true;
})
});
}
// ... for equals button
function clickEquals(x, y, z) {
equals.addEventListener('click', () => {
operatorActive = false;
// **below console logs are tests to see what values hold
console.log(currentNumber);
console.log(currentOperator);
console.log(nextNumber);
console.log(operatorActive);

display.textContent = operate(x, parseInt(y), parseInt(z));
})
}
// Running event listeners on page
clickNumber();
clickOperator();
clickEquals(currentOperator, currentNumber, nextNumber);

*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: 500;
}
body {
background: linear-gradient(to right, #af8baf, #00909e);
padding: 0;
margin: 0;
}
/* Grid system set-up for calculator*/
.calculator {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
padding: 10px;
border-radius: 10px;
/* Positioning of calculator */
background-color: black;
width: 300px;
height: 400px;
margin: auto;
margin-top: 100px;
}
.span-two {
grid-column: 1 / 3;
}
/* Calculator design*/
.output {
grid-column: 1 / 5;
background-color: black;
color: white;
font-size: 2rem;
overflow-wrap: break-word;
text-align: right;
}
button {
font-size: 20px;
border-radius: 5px;
border-color: gray;
background-color: gray;
color: white;
margin: 2px;
outline: none;
}
button:active {
background-color: lightgray;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
<div class="output">

</div>
<button class="ac">AC</button>
<button class="del">DEL</button>
<button class="flip-sign">+/-</button>
<button class="operator">÷</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">×</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
<button class="number span-two">0</button>
<button class="decimal">.</button>
<button class="equals">=</button>
</div>

<script src="main.js"></script>
</body>
</html>

当click监听器运行时，您需要检查operatorActive。当程序加载时添加侦听器时，您正在检查它，并且在那时它将始终是false。

类似地，=的点击监听器需要获取所有变量的当前值。当您调用clickEquals()时，您正在传递初始值，它们不会更改。

// Functions for calculation (+, -, *, /)
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
const operate = (operator, a, b) => {
switch (operator) {
case "+":
return add(a, b);
case "-":
return subtract(a, b);
case "×":
return multiply(a, b);
case "÷":
return divide(a, b);
}
};
// DOM selection of UI buttons and display
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
const equals = document.querySelector(".equals");
const display = document.querySelector(".output");
// Functions for event listeners when buttons clicked...
let currentNumber;
let currentOperator;
let nextNumber;
let operatorActive = false;
// ... for numerical buttons
function clickNumber() {
numbers.forEach((number) => {
number.addEventListener('click', () => {
if (!operatorActive) {
display.textContent += number.textContent;
currentNumber = display.textContent;
} else {
display.textContent += number.textContent;
nextNumber = display.textContent;
}
});
});
}
// ... for operator buttons
function clickOperator() {
operators.forEach((operator) => {
operator.addEventListener('click', () => {
currentOperator = operator.textContent;
display.textContent = "";
operatorActive = true;
})
});
}
// ... for equals button
function clickEquals() {
equals.addEventListener('click', () => {
operatorActive = false;
// **below console logs are tests to see what values hold
console.log(currentNumber);
console.log(currentOperator);
console.log(nextNumber);
console.log(operatorActive);
display.textContent = operate(currentOperator, parseInt(currentNumber), parseInt(nextNumber));
})
}
// Running event listeners on page
clickNumber();
clickOperator();
clickEquals();

*,
*::before,
*::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: 500;
}
body {
background: linear-gradient(to right, #af8baf, #00909e);
padding: 0;
margin: 0;
}

/* Grid system set-up for calculator*/
.calculator {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
padding: 10px;
border-radius: 10px;
/* Positioning of calculator */
background-color: black;
width: 300px;
height: 400px;
margin: auto;
margin-top: 100px;
}
.span-two {
grid-column: 1 / 3;
}

/* Calculator design*/
.output {
grid-column: 1 / 5;
background-color: black;
color: white;
font-size: 2rem;
overflow-wrap: break-word;
text-align: right;
}
button {
font-size: 20px;
border-radius: 5px;
border-color: gray;
background-color: gray;
color: white;
margin: 2px;
outline: none;
}
button:active {
background-color: lightgray;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<div class="output">
</div>
<button class="ac">AC</button>
<button class="del">DEL</button>
<button class="flip-sign">+/-</button>
<button class="operator">÷</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">×</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
<button class="number span-two">0</button>
<button class="decimal">.</button>
<button class="equals">=</button>
</div>

<script src="main.js"></script>
</body>
</html>

您的主要问题是：

function clickNumber() {
numbers.forEach((number) => {
if (!operatorActive) {
number.addEventListener('click', () => {
display.textContent += number.textContent;
currentNumber = display.textContent;
})
} else if (operatorActive) {
number.addEventListener('click', () => {
display.textContent += number.textContent;
nextNumber = display.textContent;
})
}
});
}

您在一开始调用这个函数来设置侦听器的数字，但在那一刻，operatorActive总是false。因此，所有的数字都只得到第一个侦听器，并且总是表现得好像没有运算符是活动的。我想你想要这样的东西：

function clickNumber() {
numbers.forEach((number) => {
number.addEventListener('click', () => {
if (!operatorActive) {
display.textContent += number.textContent;
currentNumber = display.textContent;
} else {
display.textContent += number.textContent;
nextNumber = display.textContent;
}
});
});
}

相关内容

最新更新

热门标签：