Javascript 当我按下按钮时，如何将数字从0到9添加到文本框中

我想制作一个“数字键盘”，显示带有0-9符号的按钮。当我按下每个按钮时，它应该是加起来的。 假设我按3，4，然后按1，文本框或数字框idk上应该显示341（SRY im new）

我只从老师那里拿了一些例子，所以我不知道这是不是正确的方法

我在按钮0上尝试了此操作：

    <button onclick="showZero()">0</button>
    <button onclick="">1</button>
    <button onclick="">2</button>
    <button onclick="">3</button>
    <button onclick="">4</button>
    <button onclick="">5</button>
    <button onclick="">6</button>
    <button onclick="">7</button>
    <button onclick="">8</button>
    <button onclick="">9</button>

    <br>

    <input type="text" id="txtZero">

---

我用错方法了吗？我看到了我的老师的例子，但他用这个来生成更多的按钮，而不是像我试图做的那样生成数字。

编辑：我编辑我的答案是为了提供一个更好的答案，而不使用内联事件处理。我还将代码包装到

DOMContentLoaded

事件侦听器中，以确保JS在DOM完全加载后运行

函数就绪（）{
//textfield元素
textField=document.getElementById（“字段”）
//重置按钮
resetButton=document.getElementById（“resetbtn”）
//将所有按钮放入一个数组
按钮=document.getElementsByClassName（“btn”）
//向所有按钮元素添加click事件侦听器，并将其内部文本作为值插入文本字段
Array.prototype.forEach.call（按钮，（按钮）=>{
按钮。addEventListener（“单击”，（）=>{
textField.value+=button.innerText
})
})
//添加“单击事件侦听器以重置”按钮
resetButton.addEventListener（“单击”，（）=>{
textField.value=null
})
}
文件。addEventListener（“DOMContentLoaded”，就绪）
输入，按钮{
填充：3px6px；
保证金：3倍；
}
0
1.
2.
3.
4.
5.
6.
7.
8.
9


重置
按照代码进行操作：


将函数setNumber添加到字段文本中的setNumber
如果字段文本中包含值，请将函数showZero更改为resetNumber插入零


函数resetNumber（）
{
document.getElementById（“字段”）.value='0'；
}
函数集合编号（编号）{
document.getElementById（“字段”）.value=document.getElementById（“字段”）.value==“0”？“”：document.getElementById（“字段”）.value+=number；
}

重置
0
1.
2.
3.
4.
5.
6.
7.
8.
9


您应该对所有按钮使用相同的功能，并向其传递一个值。此外，您不需要在页面加载上运行任何操作——只需初始化一个包含起始值的全局变量。我建议你把你想要的行为写成伪代码，这样你就清楚你想要的逻辑了。这个链接将帮助你避免鼓励内联事件处理。当有内容安全策略时，它们是危险的并且不起作用内联事件处理是什么？这是否意味着将javascript放入html文件中？斯利姆new@Achu我只是简单地回答了你想做的事。内联事件处理是ControlAltDel提到的
onclick
属性。实际上，您可以为每个按钮指定类名或ID，然后在javascript文件中添加Click事件处理程序。@Ozgur Sar也可以+=这意味着它将添加？这就是我的想法是的，它只是将新字符串添加到文本字段edit的现有值中，并使用事件内联。同时添加函数resetNumber.yes，但删除“onclick”并改用addEventListener
window.onload = start;
 function start() {}

 function showZero()
 {
     var zero = document.getElementById("Number");

        zero.Value="0";

            document.querySelector("txtZero").appendChild(zero);
 }