仅使用javascript创建带有样式类和onclick函数的按钮。能做得更聪明些吗？

我正在练习Javascript，并在网上观看了一些指南，现在我想做一个计算器作为开始项目，但只能使用Javascript

第一个问题: 有没有更聪明的方法来创建这些按钮？当我需要为我的计算器创建总共17个按钮时，这是一大堆代码，这只是基本的

你怎么做

第二个问题： 创建这样的按钮时，它只显示前两个按钮。“C”和“1”。未显示rest：

        var button = document.createElement("button");
        button.innerHTML = "C";
        button.classList.add('btnStyle');

        button.addEventListener("click", function () {
            document.getElementById("result").value = "";
        });

        var button1 = document.createElement("button");
        button1.innerHTML = "1";
        button1.classList.add('btnStyle');

        button1.addEventListener("click", function () {
            button1.onclick = key('1');
        });

        var button2 = document.createElement("button");
        button2.innerHTML = "2";
        button2.classList.add('btnStyle');

        button2.addEventListener("click", function () {
            button2.onclick = key('2');
        });

        var button3 = document.createElement("button");
        button3.innerHTML = "3";
        button3.classList.add('btnStyle');

        button3.addEventListener("click", function () {
            button3.onclick = key('3');
        });

---

在Bouvanni所说的基础上，您可以在每个按钮所需的符号数组上使用

forEach

循环。例如：

//使用所需的所有按钮初始化数组
常量按钮符号=['1'，'2'，'3'，'4'，'5'，'+'，'-'，'/']；
//在阵列上循环
按钮符号forEach（（符号）=>{
const button=document.createElement（“按钮”）；
button.innerHTML=符号；
button.classList.add（'btnStyle'）；
按钮。addEventListener（“单击”），函数（）{
button.onclick=键（符号）；
});
});

---

这样，您可以一次性创建所有功能类似的按钮。由于第一个按钮具有不同的单击功能，因此仍需单独设置。

您必须将每个按钮附加到父元素（请参见下面代码示例中循环体的最后一行，就在最后一个闭合卷曲括号之前），否则它将“自由浮动”在DOM中，并且不会显示在浏览器的视口中

关于数字按钮，代码可能如下所示，只要您创建了一个带有id“keyWrapper”（还必须附加到父元素）的容器div，代码就可以工作：

---

for（让i=0；i使用对象数组将允许您构造代码并使其更易于维护


功能编号勾选（evt）{
log（evt.target.dataset.value）；
}
函数plus（）{
console.log（'plus'）；
}
var操作=[{
数据：“0”，
操作：单击编号
}, {
数据：“1”，
操作：单击编号
}, {
数据：“2”，
操作：单击编号
}, {
数据：“+”，
操作：另外，
工具提示：“加号”
}, ];
var out=document.getElementById（“out”）；
operations.forEach（函数（选项）{
var btn=document.createElement（“按钮”）；
btn.type=“按钮”；
btn.dataset.value=option.data；
btn.textContent=option.data；
btn.addEventListener（“单击”，选项操作）；
如果（btn.tooltip）btn.title=btn.tooltip；
外接儿童（btn）；
})；
您可以使用for循环并将每个按钮保存在一个数组中。@Bouvanni，但这只适用于打开数字的按钮，对吗？使用索引数组。我仍然需要带+、-、*、/，C
button3.addEventListener的按钮（“单击”，函数（）{button3.onclick=key（'3'）；}）如果项目将增长，将添加更多不同的按钮动作，我将考虑创建一个对象数组，其中指定了符号和函数名。
for (let i = 0; i <= 9; i++) {
 
    let button = document.createElement("button");
    button.id = "btn" + i;
    button.innerHTML = i;
    button.classList.add('btnStyle');

    button.addEventListener("click", function () {
        document.getElementById("result").value = i;
    });

    document.getElementById("keyWrapper").appendChild(button);
}