Определение идентификатора элемента в расширении Chrome с помощью addEventListener

Question

Итак, я создаю расширение, которое копирует некоторые готовые ответы в ваш буфер обмена.У меня проблема с использованием прослушивателей событий, мне нужно сделать логику, чтобы отличаться между ответами.Мне нужен слушатель событий, чтобы узнать идентификатор кнопки, на которую вы нажимаете.Вот мой html

<div class="dropdown">
<button class="dropbtn">Retiros</button>
    <div class="dropdown-content">
        <button id="link">Clearing</button>
        <button id="bank">Invalid account</button>  
    </div>
</div>

, а вот мой popup.js

document.addEventListener('DOMContentLoaded', function() {
    var otra = document.getElementById('link');

    otra.addEventListener('click', function() {
        copyToClipboard();
    });
});

const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = 'Hola chicos, el retiro se encuentra rechazado por clearing';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

Мне нужна var otra для идентификации идентификатора без его указания, я пытался использовать event.srcelement.id внутри () но не сработало.

Любая помощь была бы полезна, извините за мой плохой английский, а также за мои плохие навыки кодирования

Answer 1

Зацикливание на коллекции кнопок и добавление слушателя к каждой.Тогда внутри обработчика this находится элемент, с которым произошло событие

[].slice.call(document.querySelectorAll('.dropdown-content button')).forEach(function(el) {

  el.addEventListener('click', function(e) {
    console.log('id=', this.id);
  })
})

<div class="dropdown">
  <div class="dropdown-content">
    <button id="link">Clearing</button>
    <button id="bank">Invalid account</button>
  </div>
</div>