Uncaught typeerror: cannot read property ‘addeventlistener’ of null

As a JavaScript developer, you might encounter different types of errors while running a JavaScript program.

One of the most common errors that you may get is the “Uncaught TypeError: Cannot Read Property ‘addEventListener’ of Null” error.

In this article, we will discuss the causes and how to fix the cannot read property ‘addeventlistener’ of null.

Why the cannot read property of null reading addeventlistener error occur?

The “cannot read property of null reading addeventlistener” error message typically occurs in JavaScript because you are trying to call the addEventListener() method on an element which is can’t be found in the DOM.

Causes of uncaught typeerror cannot read property addeventlistener of null

Before we discuss the solutions, it is necessary to understand first the causes of the error.

Here are some of the reasons why you may encounter this error:

• You are trying to add an event listener to a variable that is null or undefined.
• Adding an event listener to an element that do not exist in the DOM.
• It is possible that you are using the wrong variable name or element ID in your code.

We will learn how to handle this error:

[SOLVED] Uncaught typeerror: cannot read property ‘addeventlistener’ of null

Here are the solutions to solve the cannot read property ‘addeventlistener’ of null error.

Solution 1: Correct Selector

The first solution to solve this error is to ensure that the selector being used can access the element that is correctly defined.

You will make sure that there are no mistakes in the ID or class name, and the proper symbols are being used.

Solution 2: Checking for Null by using if Statement

The second solution to solve the error is to check the element which is not null before calling the addEventListener() method on it.

For example for using an If Statement:

const btn = document.getElementById('my-button');

console.log(btn); // <button id="my-button">Click me</button>


if (btn) {
  btn.addEventListener('click', () => {
    alert('You clicked the button');
  });
}

In this example code, the variable btn is set to the element with the ID “my-button”.

If such an element exists in the HTML document, btn will be assigned a reference to that element.

Which can then be used to attach an event listener to it.

In addition, we can also use the optional chaining operator.

Let’s take a look at the example:

const myButton = document.getElementById('does-not-exist');

console.log(myButton); // null


myButton?.addEventListener('click', () => {
  alert('You clicked the button');
});

In this example code, The myButton variable is used to store a reference to the button element with the ID does-not-exist (which does not exist in the document).

The console.log statement logs the value of the myButton variable, which will be null since the element does not exist.

The myButton?.addEventListener statement adds a click event listener to the myButton element, but only if the myButton variable is not null.

Solution 3: Moving script tag to bottom of the body

The third solution to solve this error by moving the script tag to bottom of the body.

After all the HTML elements have been declared.

For example:

In your index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Typeerror Tutorial</title>
  </head>
  <body>
    <button id="btn">Rgeistration</button>

    <script src="index.js"></script>
  </body>
</html>

The index.js file can access the button and other HTML elements since they have already been declared when the script runs.

For index.js file:

const button = document.getElementById('btn');

console.log(button); 

button.addEventListener('click', () => {
  alert('You clicked the button');
});

The button variable is assigned to the HTML element with the ID of btn.

Then, the code will logs the button variable to the console.

Finally adds a click event listener to the button element that will show an alert when clicked.

Solution 4: Accessing element in DOMContentLoaded event listener

The last solution to fix the “cannot read property ‘addEventListener’ of null” error in JavaScript.

We can add a DOMContentLoaded event listener to the document and access the element in this listener.

By doing this, the script can be placed anywhere in the HTML without causing issues.

For example:

Copy this code into your file in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Typeerror Tutorial</title>

    <!-- Script placed above element accessed -->
    <script src="index.js"></script>
  </head>
  <body>
    <button id="btn">Rgeistration</button>
  </body>
</html>

Copy this code in your file in index.js:

document.addEventListener('DOMContentLoaded', () => {
  const myButton = document.getElementById('btn');

  console.log(myButton);


  myButton.addEventListener('click', () => {
    alert('You clicked the button');
  });
});

This code sets up an event listener that is to awaits for the web page to finish loading (the DOMContentLoaded event).

If the page has been finished loading, it looks for an HTML button element with the ID “btn”.

And it will store it in a variable called btn (or whatever name you choose to use).

Additional Resources

Visit the link below to understand more about on how to handle the Typeerror you may encountered:

• Typeerror: callback is not a function
• Uncaught typeerror at app.js: i is undefined
• Typeerror: ‘dict_keys’ object is not subscriptable
• Typeerror: ‘tuple’ object does not support item assignment

Conclusion

In conclusion, the “Uncaught TypeError: Cannot Read Property ‘addEventListener’ of Null” error is a common error which is easy to solve with the correct understanding.

Through following the solutions mentioned in this article, you can quickly identify and resolve the error in your JavaScript code.

FAQs