如何选择一个按钮并将其显示在屏幕上

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>