Как отобразить каждую кнопку в одной функции в JavaScript

Итак, я пытаюсь создать калькулятор, и первое, что я хочу сделать, это отобразить все кнопки в моем выводе. Я создал функцию с именем displayButtons и внутри, я получил первые 2 кнопки по идентификатору, однако, когда я пытаюсь их отобразить, отображается только номер 2. Один из способов исправить это - создать функцию для каждого числа, и тогда она будет работать, но это не то, чего я хочу. Я также пытался вложить функции для каждого числа в функцию, но мне не удалось правильно вызвать ее при нажатии. Любые идеи? Заранее спасибо!

HTML-код:

<div id="output"></div>
        <div class="numbers">
            <button value="1" id="one" onclick="displayButtons()">1</button>
            <button value="2" id="two" onclick="displayButtons()">2</button>

JS-код:

function displayButtons() {

    var one = document.getElementById("one").value;
    document.getElementById("output").innerHTML = one;


    var two = document.getElementById("two").value;
    document.getElementById("output").innerHTML = two

}
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
18
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы пробовали цикл for? вы сможете добавить функциональность щелчка с помощью ключевого слова 'let' или отдельной функции.. запустите следующее в codepen, посмотрите, как это работает, и может ли это быть чем-то полезным.


    function createButtons() {
       //let is block scoped, not function scoped
        for (let i = 1; i <= 5; i++) {
          var body = document.getElementsByTagName("BODY")[0];
          var button = document.createElement("BUTTON");
          button.innerHTML = 'Button ' + i;
          button.onclick = function() {
               alert('This is button ' + i);
          }
          body.appendChild(button);
        }
     }
      
     createButtons();

Вы должны получить идентификатор каждой кнопки в параметре onclick, например: onclick = displayButtons (идентификатор) он создаст другое событие клика для каждой кнопки, а затем

function displayButton(id){
let oldValue = document.getElementById("output").innerHtml
document.getElementById("output").innerHTML = oldValue + id;}

Чтобы отобразить вывод при нажатии чисел, вы можете передать объект this внутри функции, подобной этой.

<button value="1" id="one" onclick="displayButtons(this)">1</button>

и когда вы нажмете на нее, вы получите узел кнопки внутри функции полный код будет

   <div class="numbers">
        <button value="1" id="one" onclick="displayButtons(this)">1</button>
        <button value="2" id="two" onclick="displayButtons(this)">2</button>
    </div>


    <script>
        function displayButtons(button) {
            document.getElementById("output").innerHTML += button.value
        }
    </script>

Большое спасибо, это тоже работает, я очень ценю это.

Rebja A. 18.05.2022 05:39
Ответ принят как подходящий

Вы продолжаете перезаписывать innerHTML, поэтому видите только 2.

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

В обработчике события клика вы можете увидеть, что кнопка который была нажата, и добавить value нажатой кнопки к div#output.

const output = document.querySelector('#output');
const numbers = document.querySelector('.numbers');

numbers.addEventListener('click', event => {
  const button = event.target;
  output.textContent += button.value;
});
<div id="output"></div>
<div class="numbers">
  <button value="1">1</button>
  <button value="2">2</button>
  <button value="3">3</button>
  <button value="4">4</button>
  <button value="5">5</button>
</div>

Оно работает! Большое спасибо, я очень ценю это.

Rebja A. 18.05.2022 05:31

Другие вопросы по теме