ElementById находит элемент, но не добавляет прослушиватель событий (расширение Chrome)

Question

У меня есть форма во всплывающем окне моего расширения с кодом:

<button type="submit" id="update" class="btn btn-primary">Submit</button>

А затем в прикрепленном скрипте следующий код:

document.addEventListener("DOMContentLoaded", function(event){
  var button = document.getElementById("update");
  button.addEventListener("click", test);
  button.style.color="red";
});



function test(){
  console.log("test");
}

Стиль "button.style".color = "red" "часть кода работает, поэтому я знаю, что кнопка была найдена успешно.Тем не менее, я все еще получаю эту ошибку при загрузке и при нажатии кнопки:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Как это исправить: (

Answer 1

Это может быть возможный дубликат Невозможно прочитать свойство 'addEventListener' с нулевым , но попробуйте эти решения, если у вас все еще есть проблемы, объясните более подробно.

Answer 2

Это работает в моих демонстрациях, см .: JSBin

    document.addEventListener("DOMContentLoaded", function(event){
     var button = document.getElementById("update");
     button.addEventListener("click", test);
     button.style.color="red"; 
    });