Javascript 如何使用按钮操作值

我一直在为自己学习计算器。我能够在计算器的屏幕上显示数值。但我似乎不知道如何使用基本运算符按钮和数字按钮一起显示值

我试着瞄准不同的按钮以获得输出，但没有成功

有人能解释一下我可以用来解决这个问题的不同方法吗

//计算器的显示
let screen=document.getElementById（“显示”）；
//加法按钮
let buttons=document.queryselectoral（“按钮”）；
//显示在计算器上
函数diplays（）{
用于（让按钮中的按钮）{
按钮。addEventListener（“单击”，函数（e）{
screen.value+=e.target.value；
})}
}
//在计算器上添加值的按钮
函数add（）{
let plus=document.querySelector（“.plus”）；
//添加按钮上的事件侦听器
plus.addEventListener（“单击”，函数（e）{
})
}

计算器
计算器
§
7.
8.
9
+/-
→
4.
5.
6.
×
÷
1.
2.
3.
-
C
0
.
+
=

你已经有了很多不需要的HTML和JavaScript，实际上只是增加了代码。虽然我还没有在下面写一个完整的解决方案，但我已经将其重新整理成一个结构，让您对如何前进有正确的想法

有关详细信息，请参见HTML和JavaScript注释

let output=document.getElementById（“显示”）；
//只需在容器级别设置一个事件处理程序
//所有事件都将冒泡到该元素，并且可以
//在那里处理
document.querySelector（“.calculator”）.addEventListener（“单击”），函数（事件）{
//您可以确定触发事件的特定元素
//通过查看event.target，然后您就可以使用它了
//元素的类，具有.classList属性。这将
//允许您确定单击了什么类型的按钮
//并据此采取行动
//还有其他更优雅、更简洁的方法
//遵循，但这种方式使其非常清晰且易于遵循：
if（event.target.classList.contains（“number”）| event.target.classList.contains（“点”））{
//把号码放在显示屏上
//您不需要HTML按钮就具有value属性，
//您只需获取按钮中的文本即可。
output.textContent+=event.target.textContent；
}else if（event.target.classList.contains（“操作”））{
//确定需要执行的操作
开关（event.target.textContent）{
格“+”：
//在这里做加法
控制台日志（“添加”）；
打破
案例“-”：
//在这里做减法
控制台日志（“减法”）；
打破
案例“×”：
//在这里做乘法
console.log（“乘法”）；
打破
案例“÷”：
//在这里做除法
控制台日志（“分割”）；
打破
}
}
});
/*我们可以使几乎任何HTML元素看起来像文本框
没有一个。因为您只显示结果
对于计算器，不需要文本框*/
#显示{
边框：1px纯灰；
背景：#e0；
宽度：100px；
高度：1米；
显示：内联块；
}
.计算器按钮{宽度：25px；高度：25px；}

计算器
计算器
§
7.
8.
9
+/-
→
4.
5.
6.
×
÷
1.
2.
3.
-
C
0
.
+
=
在结束
正文
标记之后不允许任何内容，除了结束
html
标记之外。您的
脚本
引用应该就在结束
正文
标记之前。另外，当我尝试你的按钮时，什么也没发生。你的函数添加了事件监听器，但从未被调用。在脚本中添加diplays（）和Add（），这样听者会更有效。在
按钮1
的末尾，您还有一个开始的
div
，而不是结束的
div
。感谢Scott的反馈，他将尝试与我的不同的方法。