How to Fix Cannot read Property addEventListener of Null Error in JavaScript

Cannot read property addeventlistener of null – How to Fix Cannot read Property addEventListener of Null Error in JavaScript?

by

Cannot read property addeventlistener of null: There are two primary causes of the “Cannot read property addEventListener of null” error:

  • Attempting to access the addEventListener() method on an element that does not exist in the DOM.
  • Inserting the JS script tag above the HTML, where the DOM elements are defined/declared.

index.js:

const button = document.getElementById('id not found');
console.log(button); // null

// Here we get cannot read properties of null Error (reading 'addEventListener')
button.addEventListener('click', () => {
  console.log('The button is clicked!!!');
});

Since we provided an id that does not exist in the DOM, the getElementById method returned null.

Use an if statement to verify if the DOM element is found before invoking/calling the addEventListener() method to resolve the “Cannot read property addEventListener of null” problem.

const button = document.getElementById('does-not-exist');
console.log(button); 

// Check if btn exists before addEventListener()
if (button) {
  button.addEventListener('click', () => {
    console.log('The button is clicked!!!');
  });
}

//  Use optional chaining (.)
button.addEventListener('click', () => {
  console.log('The button is clicked!!!');
});

Ensure sure to pass the right identifier and include an if statement to determine whether the DOM element is defined.

The second example is using the optional chaining (.) operator, which causes a short-circuit rather than an error.

If the button variable’s value is null or undefined, the operator returns undefined; otherwise, the method is called.

To resolve the “Cannot read property addEventListener of null” error, place the JS script tag at the bottom of the body. After the HTML elements have been declared, the JS script tag should be placed.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- Here script tag is placed before the HTMl elements which is 
    a BAD approach since this script tag gets executed before HTML body-->
    <script src="index.js"></script>

    <button id="btn">Submit</button>
  </body>
</html>

Explanation:

Since this JS script tag is added before the button element is declared in the example, 
the button element will not be available in the index.js file.

index.js:

const button = document.getElementById('button');
console.log(button);

// Here we get cannot read properties of null Error (reading 'addEventListener')
button.addEventListener('click', () => {
  console.log('The button is clicked!!!');
});

Fixing Cannot read Property addEventListener of Null Error in JavaScript

Cannot read property addeventlistener of undefined: The JavaScript <script/> tag must be moved to the bottom of the body after the declaration of HTML elements.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="btn">Submit</button>

    <!--Here the script tag is placed at the bottom of the body after the 
    declaration of HTML elements which is a GOOD approach-->
    <script src="index.js"></script>
  </body>
</html>

Since the DOM elements have already been declared by the time the script is run, the index.js file now has access to them.

index.js:

const button = document.getElementById('button');
console.log(button);

// Now the code does not produce an error. It works fine
button.addEventListener('click', () => {
  console.log('The button is clicked!!!');
});

Since the button element is positioned above the script that loads the index.js file, it gets executed before the script.

The button element is found, and the getElementById method returns the actual element rather than null, allowing us to execute the element’s addEventListener method and attach an event listener.

In Brief

When trying to call the addEventListener() method on an element that does not exist in the DOM, the “Cannot read property addEventListener of null” error occurs.

Variables with a value of null are frequently returned by methods like getElementById() when the element do not exist in the DOM.