如何获取在 Javascript 中按下的按钮的名称？答案

【问题标题】：How to get the name of a button pressed in Javascript?如何获取在 Javascript 中按下的按钮的名称？
【发布时间】：2018-05-04 12:13:29
【问题描述】：

我有至少 81 个按钮的 2 个<div>s，它们都具有相同的类，但它们具有不同的 ID 和名称。我正在尝试弄清楚如何提醒正在按下的当前按钮的名称。

【问题讨论】：

alert(buttonElement.id + " " + buttonElement.name)?
你有什么尝试吗？
是的，我不断收到 [object HTMLCollection]。

标签： javascript arrays button

【解决方案1】：

function runMe(e){
  return function(){
    console.log(e.getAttribute("id"));
  }
}

var eles = document.getElementsByClassName("myButton")
Array.prototype.forEach.call(eles,function(ele){
  ele.onclick = runMe(ele);
})

<button id="a1" class="myButton">A1</button>
<button id="b2" class="myButton">B2</button>

【讨论】：

【解决方案2】：

获取所有具有相同类名的按钮并将click事件监听器分配给每个按钮，以便在单击按钮时调用监听器：

function btnClick(){
 console.log(this.id + " " + this.name);
}

var allButtons = document.getElementsByClassName('myButton');
for(i=0; i<allButtons.length; i++){
   allButtons[i].addEventListener('click', btnClick);
}

<button id="1" class="myButton" name='name1'>B1</button>
<button id="2" class="myButton" name='name2'>B2</button>
<button id="3" class="myButton" name='name3'>B2</button>
<button id="4" class="myButton" name='name4'>B2</button>
<button id="5" class="myButton" name='name5'>B2</button>

【讨论】：

【解决方案3】：

您可以通过在点击处理函数中使用this.name 来尝试以下方式：

var btns = document.querySelectorAll('button');
btns.forEach(function(btn){
  btn.addEventListener('click', function(){
    console.log('Name of the cliked button is:', this.name)
  })
})

<div>
  <button type="button" id="btn1" name="btnName1">Button 1</button>
  <button type="button" id="btn2" name="btnName2">Button 2</button>
 
  <!--------- More Buttons--------->
</div>
<div>
  <!--------- More Buttons--------->
 
  <button type="button" id="btn48" name="btnName48">Button 48</button>
  <button type="button" id="btn49" name="btnName49">Button 49</button>
  <button type="button" id="btn50" name="btnName50">Button 50</button>
  
  <!--------- More Buttons--------->
</div>

【讨论】：