计算器 - 单击运算符后如何存储数字？
我正在尝试用普通的javascript构建一个计算器。我设法存储了第一个数字和运算符，但我不知道如何存储第二个数字。有人可以给我一个提示或告诉mi，如果我到目前为止写的逻辑有问题吗？
这些是选择器和存储显示数字的变量
const input = document.querySelector(".display");
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
const dot = document.querySelector(".dot");
const clear = document.querySelector(".clear");
let displayValue = "0";
这些是用于存储数字的变量和要在函数中使用的运算符
let firstNum = "";
let secondNum = "";
let operator;
function calculator(firstNum, secondNum, operator) {
operators.forEach(operator => {
operator.addEventListener("click", (e) => {
firstNum = displayValue;
console.log(firstNum);
operator = e.target.innerText;
console.log(operator);
})
})
}
calculator();
我不知道如何在单击运算符后访问该号码。我可以在相同的函数中执行此操作吗？
<div class="container">
<div class="display">0</div>
<div class="buttons">
<button class="clear">C</button>
<div></div>
<div></div>
<div></div>
<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">x</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">-</button>
<button class="number">0</button>
<button class="dot">.</button>
<button class="operator">=</button>
<button class="operator">+</button>
</div>
</div>
莫回无1回答
-
小怪兽爱吃肉
如果您只需要一个包含2个数字和一个运算符的计算器，则可以执行以下操作来存储每个数字以及运算符的值。const input = document.querySelector(".display");const numbers = document.querySelectorAll(".number");const operators = document.querySelectorAll(".operator");const dot = document.querySelector(".dot");const clear = document.querySelector(".clear");let displayValue = "0";let firstNum = "";let secondNum = "";let operator = "";numbers.forEach(number => { number.addEventListener("click", e => { if (operator === "") { // Read first number if no operator set yet firstNum += e.target.innerText; console.log(firstNum) } else { // Read second number secondNum += e.target.innerText; console.log(secondNum) } });});operators.forEach(op => { op.addEventListener("click", e => { operator = e.target.innerText; console.log(operator) // If equals operator, perform operation });});编辑：要详细说明有关第一个数字的值未正确打印到控制台的注释，请参阅下面的代码片段：numbers.forEach(number => { number.addEventListener("click", e => { if (operator === "") { // Read first number if no operator set yet firstNum += e.target.innerText; } else { // Read second number secondNum += e.target.innerText; } });});operators.forEach(op => { op.addEventListener("click", e => { if (e.target.innerText !== "=") { // If the operator is not equals operator = e.target.innerText; console.log(firstNum); // Print the first number console.log(operator); // Print the operator } else { // If equals button clicked console.log(secondNum); // Print 2nd number switch (operator) { // Calculate and print output case "+": console.log(parseInt(firstNum) + parseInt(secondNum)); break; case "-": console.log(parseInt(firstNum) - parseInt(secondNum)); break; // etc... default: break; } } });});
随时随地看视频慕课网APP
相关分类
JavaScript