ElementById finds element but won't add event listener (Chrome extension)

Question

I have a form in my extension's popup with the code:

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

And then in the attached script, the following code:

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



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

The "button.style.color="red"" portion of the code works, so I know that the button was found successfully. However, I still receive this error upon load and when the button is clicked:

Uncaught TypeError: Cannot read property 'addEventListener' of null

How do I fix this :(

I assume the problem is that your button is not in the DOM before your popup shows. — connexo, Dec 01 '18 at 23:24

score 0 · Answer 1 · answered Dec 01 '18 at 23:08

0

It is working in my demos, see: JSBin

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

answered Dec 01 '18 at 23:08

piotrruss

417
3
11

score 0 · Answer 2 · answered Dec 01 '18 at 23:08

0

This could be a possible duplicate Cannot read property 'addEventListener' of null but, try these solutions out, if your still having trouble explain more in detail.

answered Dec 01 '18 at 23:08

ElementById finds element but won't add event listener (Chrome extension)

2 Answers2

Linked