Как я могу сделать кнопки с цифрами от 0 до 9, которые добавляются в текстовое поле, когда я их нажимаю

Я хочу сделать «цифровую клавиатуру», которая показывает кнопки с символами от 0 до 9. Когда я нажимаю каждую кнопку, она должна складываться. Итак, скажем, я нажимаю 3, 4, затем 1, это должно сказать 341 в текстовом поле или числовом поле idk (извините, я новенький).

Я взял только несколько примеров от своего учителя, поэтому я не знаю, правильный ли это метод.

Я попробовал это на кнопке 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);
 }

Я использую неправильный метод? Я видел пример моего учителя, но он использовал его для создания большего количества кнопок, а не чисел, как я пытался сделать.

🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.

[РЕШЕНО]Перейти к решению

1 509

Javascript273878 вопросов Html113619 вопросов Button3313 вопросов

Ответы:

Решено

Обновлено: я отредактировал свой ответ, чтобы предоставить лучший ответ, который не использует встроенную обработку событий. Я также завернул код в прослушиватель событий 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>

Следуйте коду к нему:

Добавьте функцию setNumber для установки числа в тексте поля.
Измените функцию 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>

Как я могу сделать кнопки с цифрами от 0 до 9, которые добавляются в текстовое поле, когда я их нажимаю

Ответы:

Интересные вопросы для изучения