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

ProgramBox

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

Post author:admin
Запись опубликована:1 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #button

#javascript #HTML #кнопка

Вопрос:

Я хочу создать «цифровую клавиатуру», которая показывает кнопки с символами от 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);
 }

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

1. Вы должны использовать одну и ту же функцию для всех кнопок и передавать ей значение. Кроме того, вам не нужно ничего запускать при загрузке страницы — просто инициализируйте глобальную переменную, содержащую ваше начальное значение. Я предлагаю вам записать свое предполагаемое поведение в виде псевдокода, чтобы вам была ясна логика, которую вы ищете.

2. Эта ссылка поможет вам codeburst.io /…

Ответ №1:

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

Развернуть фрагмент кода

1. Не поощряйте встроенную обработку событий. Они опасны и не работают, когда есть Политика безопасности контента

2. что делает встроенная обработка событий? означает ли это поместить javascript в html-файл? srry я новый

3. @Achu Я только что дал быстрый ответ на то, что вы пытались сделать. Встроенная обработка событий — это onclick атрибут, о котором упоминал ControlAltDel. На самом деле вы можете присвоить имена классов или идентификаторы каждой кнопке, а затем добавить обработчики событий щелчка в свой файл javascript.

4. @Ozgur Sar также = это означает, что он добавит? это то, что я имел в виду, да

5. Да, он просто добавляет новую строку к существующему значению текстового поля

Ответ №2:

Следуйте коду для этого:

Добавьте функцию setNumber для установки номера в тексте поля.
Измените функцию showZero на resetNumber, если содержит значение в текстовом поле insert zero.

 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>

Развернуть фрагмент