Javascript 如何通过OnClick函数循环标记元素并在显示器上获取相应的内容？

var key=”“；
//获取关键值
var x=document.getElementById（“计算器”）；
变量y=x.getElementsByTagName（“span”）；
函数计算（）
{
对于（var i=0；i将事件移动到JS中，然后为单击的元素运行calc函数：


var key=”“；
var x=document.getElementById（“计算器”）；
变量y=x.getElementsByTagName（“span”）；
var display=document.getElementById（“display”）；
对于（变量i=0；i

#计算器{
宽度：200px；
高度：380px；
}
分区跨度{
宽度：50px；
高度：50px；
外形：1px纯黑；
浮动：左；
线高：50px；
背景色：#f6f6f6；
字体系列：“Neue Helvetica”，无衬线；
字体大小：15px；
文本对齐：居中；
}
#展示{
宽度：200px；
高度：80px；
文本对齐：右对齐；
线高：100px；
字体大小：25px；
溢出：隐藏；
颜色：白色；
背景色：黑色；
}
#零{
宽度：100px；
}
0
自动控制
+/-
%
÷
7.
8.
9
x
4.
5.
6.
-
1.
2.
3.
+
0
.
=
这里有一个替代解决方案

方法略有不同，结果相同


var getKeyValue=[]；
var totalKey=“”；
var keys=document.getElementById（“计算器”）.getElementsByTagName（“跨度”）；
函数计算（一）{
totalKey+=keys[i].innerHTML；
document.getElementById（“display”）.innerHTML=totalKey；
}
函数getKeyValueFunction（i）{
返回函数（）{
键[i]。addEventListener（'click'，函数（）{
钙（i）；
}，假）；
};
}
函数initiateGetKeyValues（）{
对于（变量i=0；i

#计算器{
宽度：200px；
高度：380px；
}
分区跨度{
宽度：50px；
高度：50px；
外形：1px纯黑；
浮动：左；
线高：50px；
背景色：#f6f6f6；
字体系列：“Neue Helvetica”，无衬线；
字体大小：15px；
文本对齐：居中；
}
#展示{
宽度：200px；
高度：80px；
文本对齐：右对齐；
线高：100px；
字体大小：25px；
溢出：隐藏；
颜色：白色；
背景色：黑色；
}
#零{
宽度：100px；
}

0
自动控制
+/-
%
÷
7.
8.
9
x
4.
5.
6.
-
1.
2.
3.
+
0
.
=
非常感谢您提供的解决方案。在span内容中循环是可行的还是通过为每个键分配一个id来获取内容更好？