Javascript: Uncaught TypeError: Cannot call method ‘addEventListener’ of null

by

Your code is in the <head> => runs before the elements are rendered, so document.getElementById('compute'); returns null, as MDN promise…

element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

Solutions:

  1. Put the scripts in the bottom of the page.
  2. Call the attach code in the load event.
  3. Use jQuery library and it’s DOM ready event.

What is the jQuery ready event and why is it needed?
(why no just JavaScript’s load event):

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers…
…

ready docs

More Related Contents:

  1. addEventListener vs onclick
  2. How to trigger event in JavaScript?
  3. addEventListener calls the function without me even asking it to
  4. How to pass arguments to addEventListener listener function?
  5. addEventListener using for loop and passing values [duplicate]
  6. addEventListener not working in IE8
  7. MSIE and addEventListener Problem in Javascript?
  8. Javascript removeEventListener not working
  9. Javascript “addEventListener” Event Fires on Page Load [duplicate]
  10. How to check whether dynamically attached event listener exists or not?
  11. Cannot read property ‘addEventListener’ of null
  12. Binding multiple events to a listener (without JQuery)?
  13. How to remove all listeners in an element? [duplicate]
  14. Correct usage of addEventListener() / attachEvent()?
  15. Removing an anonymous event listener
  16. Adding click event handler to iframe
  17. Want to add “addEventListener” on multiple elements with same class [duplicate]
  18. JavaScript listener, “keypress” doesn’t detect backspace?
  19. Why Firefox says that window.event is undefined? (call function with added event listener)
  20. addEventListener on a querySelectorAll() with classList [duplicate]
  21. addEventListener on NodeList [duplicate]
  22. Variable in JavaScript callback functions always gets last value in loop? [duplicate]
  23. addEventListener vs onclick
  24. Code inside DOMContentLoaded event not working
  25. Why doesn’t document.addEventListener(‘load’, function) work in a greasemonkey script?
  26. Javascript multiple dynamic addEventListener created in for loop – passing parameters not working
  27. reactjs event listener beforeunload added but not removed
  28. addEventListener Two Functions
  29. Javascript scope addEventListener and this
  30. Listen to multiple keydowns

Leave a Comment