Solve - Cannot read Property addEventListener of Null in JS

Solve - Cannot read Property addEventListener of Null #

There are 2 main reasons the "Cannot read property addEventListener of null" error occurs:

Accessing the addEventListener() method on DOM element that doesn't exist.
Inserting the JS script tag above the HTML, where the DOM elements are declared.

The main reason the error occurs is when you try to call the addEventListener() method on a DOM element that isn't found.

index.js

Copied!
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 does not exist in the DOM, therefore the getElementById method returned null.

To solve the "Cannot read property addEventListener of null" error, use an if statement to check if the DOM element is found, before calling the addEventListener() method.

index.js

Copied!
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 defined.

The second example uses the optional chaining (?.) operator, which short-circuits instead of throwing an error.

If the value of the 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.

index.html

Copied!
<!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.

index.js

Copied!
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.

index.html

Copied!
<!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 executed.

index.js

Copied!
const btn = document.getElementById('btn');
console.log(btn);

// ✅ Works as expected
btn.addEventListener('click', () => {
  console.log('btn clicked');
});

Conclusion #

The "Cannot read property addEventListener of null" error occurs when trying to call the addEventListener() method on a DOM element that doesn't exist.

Variables that store a value of null are often returned from methods such as getElementById(), when the element does not exist in the DOM.

Solve - Cannot read Property addEventListener of Null in JS