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

我对以下程序的预期输出作为输入示例（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显示的是另一种情况。我似乎不知道我的代码出了什么问题。非常感谢你的帮助

//用于计算的函数（+、-、*、/）
常数加=（a，b）=>a+b；
常量减法=（a，b）=>a-b；
常数乘法=（a，b）=>a*b；
常数除法=（a，b）=>a/b；
常量运算=（运算符，a，b）=>{
开关（操作员）{
格“+”：
返回添加（a，b）；
案例“-”：
返回减法（a，b）；
案例“×”：
返回乘法（a，b）；
案例“÷”：
返回除法（a，b）；
}
};
//用户界面按钮和显示的DOM选择
常量编号=document.queryselectoral（“.number”）；
const operators=document.queryselectoral（“.operator”）；
const equals=document.querySelector（“.equals”）；
const display=document.querySelector（“.output”）；
//单击按钮时事件侦听器的函数。。。
让我们来看看这个数字；
让电流算符；
让下一个数字；
让运算符active=false；
// ... 用于数字按钮
函数clickNumber（）{
数字。forEach（（数字）=>{
如果（！运算符活动）{
number.addEventListener（'单击'，（）=>{
display.textContent+=number.textContent；
currentNumber=display.textContent；
})
}else if（运算符活动）{
number.addEventListener（'单击'，（）=>{
display.textContent+=number.textContent；
nextNumber=display.textContent；
})
}
});
}
// ... 用于操作员按钮
函数clickOperator（）{
运算符。forEach（（运算符）=>{
operator.addEventListener（'click'，（）=>{
currentOperator=operator.textContent；
display.textContent=“”；
运算符活动=真；
})
});
}
// ... “相等”按钮
函数clickEquals（x，y，z）{
equals.addEventListener（'click'，（）=>{
运算符活动=假；
//**控制台日志下面是测试，以查看哪些值有效
console.log（当前编号）；
控制台日志（currentOperator）；
console.log（下一个编号）；
控制台日志（操作员活动）；
display.textContent=operate（x，parseInt（y），parseInt（z））；
})
}
//在第页上运行事件侦听器
单击数字（）；
单击运算符（）；
单击等于（currentOperator、currentNumber、nextNumber）
*，*：：之前，*：：之后{
框大小：边框框；
字体系列：高谭圆形，无衬线；
字号：500；
}
身体{
背景：线性梯度（向右，#af8baf，#00909e）；
填充：0；
保证金：0；
}
/*计算器的网格系统设置*/
.计算器{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
填充：10px；
边界半径：10px；
/*计算器的定位*/
背景色：黑色；
宽度：300px；
高度：400px；
保证金：自动；
边缘顶部：100px；
}
.跨度2{
网格柱：1/3；
}
/*计算器设计*/
.产出{
网格柱：1/5；
背景色：黑色；
颜色：白色；
字号：2rem；
溢出包装：断开单词；
文本对齐：右对齐；
}
钮扣{
字体大小：20px；
边界半径：5px；
边框颜色：灰色；
背景颜色：灰色；
颜色：白色；
保证金：2倍；
大纲：无；
}
按钮：激活{
背景颜色：浅灰色；
}

计算器
自动控制
德尔
+/-
÷
7.
8.
9
×
4.
5.
6.
-
1.
2.
3.
+
0
.
=
您的主要问题是：

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;
      }
    });
  });
}

当click listener运行时，需要检查
operatorActive
。在加载程序时添加侦听器时，您正在检查它，此时它将始终为
false

类似地，
=
的单击侦听器需要获取所有变量的当前值。调用
clickEquals（）
时传递的是初始值，它们不会改变


//用于计算的函数（+、-、*、/）
常数加=（a，b）=>a+b；
常量减法=（a，b）=>a-b；
常数乘法=（a，b）=>a*b；
常数除法=（a，b）=>a/b；
常量运算=（运算符，a，b）=>{
开关（操作员）{
格“+”：
返回添加（a，b）；
案例“-”：
返回减法（a，b）；
案例“×”：
返回乘法（a，b）；
案例“÷”：
返回除法（a，b）；
}
};
//用户界面按钮和显示的DOM选择
常量编号=document.queryselectoral（“.number”）；
const operators=document.queryselectoral（“.operator”）；
const equals=document.querySelector（“.equals”）；
const display=document.querySelector（“.output”）；
//单击按钮时事件侦听器的函数。。。
让我们来看看这个数字；
让电流算符；
让下一个数字；
让运算符active=false；
// ... 用于数字按钮
函数clickNumber（）{
数字。forEach（（数字）=>{
number.addEventListener（'单击'，（）=>{
如果（！运算符活动）{
display.textContent+=number.textContent；
currentNumber=display.textContent；
}否则{
display.textContent+=number.textContent；