javascript - 如何选择一个按钮并将其值显示到屏幕上

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;
}

标签： javascripthtmlrandomgetelementbyid

Answer 1

最好避免使用 inline-event likeonclick并使用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>