javascript - 我如何制作带有 0-9 数字的按钮,当我按下它们时添加到文本框中
问题描述
我想制作一个“数字键盘”,显示带有 0-9 符号的按钮。当我按下每个按钮时,它应该加起来。所以假设我按 3 、 4 然后 1 它应该在文本框或数字框 idk 上显示 341(srry 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">
window.onload = start;
function start() {}
function showZero()
{
var zero = document.getElementById("Number");
zero.Value="0";
document.querySelector("txtZero").appendChild(zero);
}
我使用了错误的方法吗?我看到了我的老师的例子,但他正在使用它来生成更多按钮,而不是像我试图做的那样生成数字。
解决方案
编辑:我编辑了我的答案以提供一个不使用内联事件处理的更好的答案。我还将代码包装到DOMContentLoaded
事件侦听器中,以确保 JS 在 DOM 完全加载后运行。
function ready() {
// The textfield element
textField = document.getElementById("field")
// The reset button
resetButton = document.getElementById("resetbtn")
// Get all the buttons to an Array
buttons = document.getElementsByClassName("btn")
// Add click event listener to all button elements and insert their inner text as value to the text field
Array.prototype.forEach.call (buttons, (button) => {
button.addEventListener("click", () => {
textField.value += button.innerText
})
})
// Add click event listener to reset button
resetButton.addEventListener("click", () => {
textField.value = null
})
}
document.addEventListener("DOMContentLoaded", ready);
input, button {
padding: 3px 6px;
margin: 3px;
}
<button class="btn">0</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<br>
<input type="text" id="field"><button id="resetbtn">Reset</button>