Javascript-DOM计算器在屏幕上显示数字

我正在实现一个计算器，我一直在试图在屏幕上显示数字。我通过遍历所有数字来获取它们，但当我试图替换它们以在我的div中用id#nums显示它们时，它将不起作用。这就是我一直坚持的功能

   buttons.forEach(button => {
   button.addEventListener('click', function(){
   console.log('it work') 
   document.querySelector('#nums').textContent = buttons.innerHTML
     })
  })

这里有一把小提琴要看更多

功能添加（a、b）{
返回a+b
}
函数减法（a，b）{
返回a-b
}
函数和（arr）{
结果=0；
对于（变量i=0；i{
addEventListener（'click'，function（）{
console.log（'it work'）
})
})
*/
按钮。forEach（按钮=>{
addEventListener（'click'，function（）{
console.log（'it work'）
document.querySelector（'#nums'）.textContent=buttons.innerHTML
})
})
/*
var btn_1=document.querySelector（“#btn-1”）
btn_1.addEventListener（'单击'，函数（））{
console.log（'it work'）
document.querySelector（'#nums'）.textContent=btn#u 1.textContent
})
*/
/*
document.querySelector（'#nums'）.textContent=0；
*/
/*
document.getElementsByClassName（'number-btn'）。addEventListener（'click'，function（）{
display_value==document.queryselector（'nums'）；
})
*/

正文{
背景色：黑色；
}
.集装箱{
显示：网格；
网格模板列：自动；
栅隙：10px；
填充：10px；
宽度：85%；
高度：300px；
保证金：0自动；
背景色：#cc1515；
}
#btn等于{
网格行开始：2；
网格列开始：4；
网格行端：6；
网格柱端：4；
}
.电话号码{
边框：0.5px纯黑；
背景色：白色；
字体大小：30px；
}
.接线员{
边框：0.5px纯黑；
背景色：黑色；
颜色：白色；
字体大小：30px；
}
.结果{
保证金：0自动；
宽度：90%；
高度：50px；
背景色：白色；
}
.等高线{
背景颜色：浅蓝色；
位置：绝对位置；
最高：30%；
左：35%；
宽度：400px；
保证金：自动；
垂直对齐：中间对齐；
}
#努姆斯{
字体大小：40px；
文本对齐：右对齐；
}
#接线员{
字体大小：30px；
}

计算器

55
+
-
x
/
7.
8.
9
4.
5.
6.
1.
2.
3.
.
0
自动控制
=

使用

按钮。innerHTML

不使用

按钮。innerHTML

该数组称为

按钮

——您取出的每个项目都被初始化为

按钮

。您希望将div设置为该项的innerHTML，而不是数组

按钮

——因为它是一个数组，没有

innerHTML

属性。此外，您的问题中还不清楚，但如果您想继续向计算器框中添加数字，请确保使用

+=

运算符而不是

=

，例如

document.querySelector（'#nums'）。textContent+=button.innerHTML，这样它会在按下按钮时继续添加到每个框中

如果您希望按钮仅替换计算器窗口中的上一项，这将起作用：

buttons.forEach(button => {
   button.addEventListener('click', function(){
   document.querySelector('#nums').textContent = button.innerHTML
     })
  })

编辑：事实上，由于您只想在HTML中使用文本节点，因此只需使用
按钮.textContent
或@Barmar指出的
this.textContent
（
this
也引用
按钮
）

textContent
更快，因为当您使用
innerHTML
时，浏览器引擎必须在复制时重新处理和解析所有内容
textContent
专门处理文本节点及其内容

buttons.forEach(button => {
 button.addEventListener('click', function(){
 document.querySelector('#nums').textContent = button.textContent;
 })
})

应该是按钮，而不是按钮：）

document.querySelector（'#nums'）.textContent=button.innerHTML
document.querySelector（'#nums'）.textContent+=button.innerHTML
 您也可以使用
this.innerHTML
。