[英]How do I make it so only numbers 0-9 can be entered into prompt window in JavaScript?
[英]how can i make buttons with numbers from 0-9 that adds into a textbox when i press them
我想制作一個“數字鍵盤”,顯示帶有 0-9 符號的按鈕。 當我按下每個按鈕時,它應該加起來。 所以假設我按 3、4 然后 1 它應該在文本框或數字框 idk 上顯示 341(srry 我是新的)。
我只是從我的老師那里拿了一些例子,所以我不知道這是否是正確的方法。
我在按鈕 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>
按照代碼進行操作:
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.