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 an element that's not present in the DOM.
Inserting the JS script tag above the HTML where the DOM elements are declared.

cannot read property addeventlistener of null

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

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 present.

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 ran.

index.js

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

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

The 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.

Conclusion #

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.

Solve - Cannot read Property addEventListener of Null in JS

Solve - Cannot read Property addEventListener of Null #

Conclusion #

Borislav Hadzhiev