Определить, какая кнопка была нажата

260

08 февраля 2020, 00:10

Есть три кнопки:

<button type='button'>1</button>
<button type='button'>2</button>
<button type='button'>3</button>

И код:

const buttons = document.querySelectorAll('button');
buttons.forEach((btn) => {
  btn.addEventListener('click', detect);
});
const detect = () => {
  //
};

Как в функции detect определить, какая кнопка была нажата? Пробовал через console.log(this), но это срабатывает только в функции внутри addEventListener

Answer 1

const buttons = document.querySelectorAll('button'); 
const detect = (e) => { 
  console.log(e.target); 
}; 
buttons.forEach((btn) => { 
  btn.addEventListener('click', detect); 
});

<button type='button'>1</button> 
<button type='button'>2</button> 
<button type='button'>3</button>

Answer 2

В событие доступна переменная this. В ней находится элемент на котором стоит обработчик и в случае срабатывания события он возвращает этот элемент.

const buttons = document.querySelectorAll('button'),
      detect = function(){
          console.log(this.innerHTML);
          console.log(this);
      };
 buttons.forEach((btn) => {
    btn.addEventListener('click', detect);
 });