How to fix “Cannot read property ‘addEventListener’ of null” error [duplicate]

You are loading the Javascript file in the <head>, before the body of your HTML Is loaded. Therefore your line

const guessSubmit = document.querySelector('.guessSubmit');

Has nothing to look up – your button with class guessSubmit doesn’t exist yet. And since guessSubmit is null, it does not contain any properties, hence the error.

The easiest solution is to put your <script> tag at the bottom of your HTML body rather than the head. This way it will load your Javascript after the DOM is completely loaded.

Alternative ways include adding event listeners to run your script after the DOM is loaded, such as DOMContentLoaded. See more here: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded.

Related Posts:

  1. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  2. Failed to load resource: the server responded with a status of 404 (Not Found)
  3. Can I use complex HTML with Twitter Bootstrap’s Tooltip?
  4. How do I check whether a checkbox is checked in jQuery?
  5. (Google Map API) Geocode was not successful for the following reason: REQUEST_DENIED
  6. How to make a word underline in Markdown
  7. How to play audio?
  8. Check if checkbox is checked with jQuery
  9. How can I get the data-id attribute?
  10. Check if checkbox is checked with jQuery
  11. How to import jquery using ES6 syntax?
  12. How to resolve the C:\fakepath?
  13. Getting Unexpected Token Export
  14. React with ES7: Uncaught TypeError: Cannot read property ‘state’ of undefined
  15. Adding options to select with javascript
  16. How can I mock an ES6 module import using Jest?
  17. How does the data-toggle attribute work? (What’s its API?)
  18. How to read xml file contents in jQuery and display in html elements?
  19. HTML5 Local storage vs. Session storage
  20. Programmatically change the src of an img tag
  21. Error: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’
  22. ES6: Create Strings using Template Literals – Freecodecamp
  23. Uncaught TypeError: Cannot read property ‘top’ of undefined
  24. How can I select an element by name with jQuery?
  25. Full-screen iframe with a height of 100%
  26. jQuery disable/enable submit button
  27. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  28. Parse an HTML string with JS
  29. Shortest way to print current year in a website
  30. DOMException: Failed to load because no supported source was found
  31. Vue is not defined
  32. OnChange event handler for radio button (INPUT type=”radio”) doesn’t work as one value
  33. onClick to get the ID of the clicked button
  34. HTML text input allow only numeric input
  35. How to change the buttons text using javascript
  36. How do I use this JavaScript variable in HTML?
  37. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  38. How to close current tab in a browser window?
  39. Why is marquee deprecated and what is the best alternative?
  40. Refresh/reload the content in Div using jquery/ajax
  42. How to write inside a DIV box with javascript
  43. Showing an image from an array of images – Javascript
  44. This.props.dispatch not a function – React-Redux
  45. How to get height of div in px dimension
  46. jQuery: Uncaught Error: Syntax error, unrecognized expression
  47. SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
  48. How to use in jQuery :not and hasClass() to get a specific element without a class
  49. Crop the image using JavaScript
  50. Adjust width and height of iframe to fit with content in it
  51. Retrieve the position (X,Y) of an HTML element
  52. How to display raw JSON data on a HTML page
  53. How can I copy to clipboard in HTML5 without using flash?
  54. HTML onchange (this.value)
  55. How to make an HTML back link?
  56. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  57. How to scroll an HTML page to a given anchor
  58. How do I load an HTML page in a div using JavaScript?
  59. How do I check if a cookie exists?
  60. ReactJS – .JS vs .JSX
  61. how to call a onclick function in tag?
  62. How do I refresh a DIV content?
  63. How to implement “select all” check box in HTML?
  64. How to embed a youtube playlist with a sidebar
  65. External JavaScript Not Running, does not write to document
  66. JavaScript button onclick not working
  67. JavaScript button onclick not working
  68. Create a simple 10 second countdown
  69. HTML make text clickable without making it a hyperlink
  70. Getting HTML form values
  71. Get the size of the screen, current web page and browser window
  72. How to run a function when the page is loaded?
  73. Disabled href tag
  74. Creating Accordion Table with Bootstrap
  75. Creating Multiple Modals on a Single Page
  76. How to enable a disabled checkbox dynamically?
  77. Closing Bootstrap modal onclick
  78. .filter is not a function 
  79. When is a CDATA section necessary within a script tag?
  80. where is create-react-app webpack config and files?
  81. window.location() not working, not opening page
  82. How to clear the canvas for redrawing
  83. How to create checkbox inside dropdown?
  84. Default text on input
  85. Adding Google Translate to a web site
  86. Javascript, viewing [object HTMLInputElement]
  87. Getting “Cannot call a class as a function” in my React Project
  88. Why onbeforeunload event is not firing
  89. How to use aria-expanded=”true” to change a css property
  90. Error: Couldn’t find preset “es2015” relative to directory “/Users/username”
  91. How to wrap the content of the main tinyMCE editor with extra tags
  92. Contact Form 7 – Give each checkbox a class?
  93. How do developers add “Smooth Transitions” to their sites?
  94. Building a slide down search box in wordpress
  95. Do I just put the html in a page when enqueueng or do I also have to reference js file from the html page [closed]
  96. creating a static HTML/JS/PHP page
  97. Web cover page open when button clicked
  98. How to run Javascript popup modal in a loop?
  99. how to do open a link in a open window from menu bar? [closed]
  100. I have custom html mixed with inline javascript that I want added to my WordPress site, how do I achieve this?

Leave a Comment