Как отобразить каждую кнопку в одной функции в 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

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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

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