Borislav Hadzhiev
Last updated: Jul 25, 2022
Check out my new book
There are 2 main reasons the "Cannot read property addEventListener of null" error occurs:
addEventListener()
method on an element that's not present in
the DOM.The main reason the error occurs is when you try to call the
addEventListener()
method on a DOM element that isn't found.
const btn = document.getElementById('does-not-exist'); console.log(btn); // 👉️ null // ⛔️ cannot read properties of null (reading 'addEventListener') btn.addEventListener('click', () => { console.log('btn clicked'); });
We used an id
that is not present in the DOM, therefore the getElementById
method returned null
.
The error "Cannot read property addEventListener of null" occurs when we call
the addEventListener()
method on a DOM element that doesn't exist. To solve
the error, use an if
statement to check if the DOM element exists before
calling the addEventListener()
method.
const btn = document.getElementById('does-not-exist'); console.log(btn); // 👉️ null // ✅ Check if btn exists before addEventListener() if (btn) { btn.addEventListener('click', () => { console.log('btn clicked'); }); } // ✅ Using optional chaining (?.) btn?.addEventListener('click', () => { console.log('btn clicked'); });
Make sure to pass the correct identifier and add an if
statement to check if
the DOM element is present.
The second example uses the optional chaining (?.) operator, which short-circuits instead of throwing an error.
btn
variable is null
or undefined
, the operator returns undefined
, otherwise it calls the method.To solve the "Cannot read property addEventListener of null" error, make sure to insert the JS script tag at the bottom of the body. The JS script tag should be placed after the HTML elements have been declared.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ❌ BAD - Script is ran before button is declared ❌ --> <script src="index.js"></script> <button id="btn">Submit</button> </body> </html>
The JS script tag in the example is placed before the button
element is
declared, therefore the button
element will not be available in the index.js
file.
const btn = document.getElementById('btn'); console.log(btn); // 👉️ null // ⛔️ cannot read properties of null (reading 'addEventListener') btn.addEventListener('click', () => { console.log('btn clicked'); });
You have to move the JS script tag to the bottom of the body, after the HTML elements have been declared.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Submit</button> <!-- ✅ GOOD - HTML is already declared ✅ --> <script src="index.js"></script> </body> </html>
Now the index.js
file has access to the DOM elements because they have already
been declared by the time the script is ran.
const btn = document.getElementById('btn'); console.log(btn); // ✅ Works as expected btn.addEventListener('click', () => { console.log('btn clicked'); });
button
element is placed above the script that loads the index.js
file, so it is ran before the script.The button
element is found and the getElementById
method returns the actual
element and not null
, so we are able to call the element's addEventListener
method and attach an event listener.
The "Cannot read property addEventListener of null" error occurs when trying to
call the addEventListener()
method on an element that isn't present in the
DOM.
Variables that store a value of null
are often returned from methods such as
getElementById()
when the element is not present in the DOM.