Как выбрать кнопку и вывести ее значение на экран

Question

Я хочу иметь возможность выбрать из списка кнопок и это отображение на экране значение этой кнопки.У меня есть функция, но я не уверен, какие параметры должны быть в HTML или функции.

    <input type="button" class="button" id="button2" value="2" onclick="click(this)">
    <input type="button" class="button" id="button3" value="3" onclick="click(this)">
    <input type="button" class="button" id="button4" value="4" onclick="click(this)">

function click(button){
    var buttonclicked = document.getElementById(button.id).value;
    firstbox.innerHTML = "Your Chosen button is: " + buttonclicked;
    button.disabled = true;
}

Answer 1

Лучше избегать использования встроенного события, такого как onclick, и прикреплять событие, используя addEventListener.

ПРИМЕЧАНИЕ: переменная firstbox должна быть определена и должна относиться к элементу, где вы будете печатать текст.

var buttons = document.getElementsByClassName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', click, false);
}

function click() {
  var firstbox = document.getElementById('firstbox');
  var buttonclicked = document.getElementById(this.id).value;

  firstbox.innerHTML = "Your Chosen button is: " + buttonclicked;
  this.disabled = true;
}

<input type="button" class="button" id="button2" value="2" onClick="click()">
<input type="button" class="button" id="button3" value="3" onClick="click(this)">
<input type="button" class="button" id="button4" value="4" onClick="click(this)">

<div id="firstbox"></div>