В чем может быть проблема доступа к любой кнопке DOM для применения с событием addEventListener в Javascript?

Question

Я добавляю прослушиватель событий (в IIFE) к ключу в Javascript, получая доступ к кнопке из исходного кода html через идентификатор, но он показывает ошибку с сообщением:

"canне прочитать свойство addeventlistener нулевого элемента;

var controller = (function() {
  document.querySelector('btn2').addEventListener('click', function() {
    console.log('hello');
  });
})();

<button id="btn2" value="value1"><i class="fa fa-check"></i></button></div>

Answer 1

Вы используете document.querySelector, чтобы получить элемент по идентификатору, для этого вам нужно добавить # перед идентификатором. document.querySelector('btn2') -> document.querySelector('#btn2'). Я бы порекомендовал вам заменить document.querySelector на document.getElementById, так как это быстрее и это то, что вы должны использовать.

var controller=(function()
{

   document.getElementById('btn2').addEventListener('click',function()
   {
      console.log('hello');
   });
})();

<button id="btn2" value="value1" ><i class="fa fa-check"></i></button></div>

Answer 2

Если вы используете querySelector, вам нужно указать, каким должен быть селектор, например, вы хотите выбрать элемент, используя id, вам нужно добавить '#'.

document.querySelector('#id');