Как получить название кнопки, нажатой в Javascript?

Question

У меня есть 2 <div> с не менее 81 кнопки, все с одинаковым классом, но у них разные идентификаторы и имена. Я пытаюсь выяснить, как предупредить имя текущей кнопки, которая была нажата.

Answer 1

Вы можете попробовать следующий способ, используя 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>

Answer 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>

Answer 3

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>