我如何制作带有 0-9 数字的按钮，当我按下它们时添加到文本框中
[英]how can i make buttons with numbers from 0-9 that adds into a textbox when i press them
问题描述
I want to make a "numeric keyboard" that shows buttons with symbols from 0-9.
我想制作一个“数字键盘”，显示带有 0-9 符号的按钮。 When I press each button it is suppose to add up.当我按下每个按钮时，它应该加起来。 So lets say i press 3, 4 then 1 it should say 341 on the text box or number box idk (srry im new).所以假设我按 3、4 然后 1 它应该在文本框或数字框 idk 上显示 341（srry 我是新的）。
I have only taken some examples from my teacher so i dont know if this is the right method.我只是从我的老师那里拿了一些例子，所以我不知道这是否是正确的方法。
I tried this on button 0:我在按钮 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);
}
Am i using wrong method?我使用了错误的方法吗？ I saw my teacher example, but he was using this to generate more buttons and not numbers like im trying to do.我看到了我的老师的例子，但他正在使用它来生成更多按钮，而不是像我试图做的那样生成数字。
2 个解决方案
解决方案1
1 已采纳 2020-12-14 15:38:23
EDIT: I edited my answer to provide a better answer that doesn't use inline event handling.编辑：我编辑了我的答案以提供一个不使用内联事件处理的更好的答案。 I also wrapped the code into DOMContentLoaded event listener to make sure JS runs after the DOM is fully loaded.我还将代码包装到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>
解决方案2
0 2020-12-14 15:46:41
Follow the code to it:按照代码进行操作：
- Add function setNumber to set number in field text.添加 function setNumber 以设置字段文本中的数字。
- Change function showZero to resetNumber if contains the value in field text insert zero.如果包含字段文本中的值插入零，则将 function showZero 更改为 resetNumber。
function resetNumber() { document.getElementById("field").value = '0'; } function setNumber(number) { document.getElementById("field").value = document.getElementById("field").value === '0'? '': document.getElementById("field").value += number; }
<html> <body> <button onclick="resetNumber()">Reset</button> <button onclick="setNumber(0)">0</button> <button onclick="setNumber(1)">1</button> <button onclick="setNumber(2)">2</button> <button onclick="setNumber(3)">3</button> <button onclick="setNumber(4)">4</button> <button onclick="setNumber(5)">5</button> <button onclick="setNumber(6)">6</button> <button onclick="setNumber(7)">7</button> <button onclick="setNumber(8)">8</button> <button onclick="setNumber(9)">9</button> <br /> <input type="text" id="field" /> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.