Cannot read property ‘addeventlistener’ of null in JavaScript – How To Fix It?

Cannot read property ‘addeventlistener’ of null in js

If you use the script tag before declaring DOM elements, you may get the error “Cannot read property ‘addeventlistener’ of null” in JavaScript. So how to fix it? Read this article till the end to find the best answer.

Cause of the error “Cannot read property ‘addEventlistener’ of null” in js

There are two main situations where the error occurs:

  1. Using the script tag before declaring DOM elements.
  2. Trying to access the addEventListener() method on a non-exist DOM element.

Most users who encounter the error will fall into the second case.

How do we fix the error?

Solution1: Move the Script tag to the bottom of the body

To avoid errors, you must place the script tag at the end of the body. This will make your javascript code work with all the HTML elements declared above. The example below is a harmful code when we put the scripts at the top of the body.

<!DOCTYPE html>
<html>
<title>Demo</title>
<head>
</head>
<body>

       <script>
           const myBtn = document.getElementById('demoBtn');
           myBtn.addEventListener("click", myFunction);

	         function myFunction() {
 		           console.log('Example 1')
           }
       </script>

       <button id="demoBtn">My Example</button>

</body>
</html>

If your code is like the example above, you won’t get the desired results. The reason is that the ‘button’ element is placed after the scripts, so when we access it through the getElementById() method, the return result will be ‘null’. 

Output:

Please modify the code to the following. You will see the result exactly as you want.

<!DOCTYPE html>
<html>
<title>Demo</title>
<head>
</head>
<body>
        <button id="demoBtn">My Example</button>

        <script>
           const myBtn = document.getElementById('demoBtn');
           myBtn.addEventListener("click", myFunction);

	         function myFunction() {
 		          console.log('Example 1')
           }
        </script>

</body>
</html>

Output:

Now the method getElementById() can find the element ‘button’ with the id = ‘demoBtn’ and display the correct result instead of the value ‘null’ like above.

Solution 2: Use conditional statements to check for the element’s existence

To prevent you from accidentally accessing an HTML element that does not exist, I suggest using a conditional statement to check for the existence of the element before you want to work with it.

<!DOCTYPE html>
<html>
<title>Demo</title>
<head>
</head>
<body>

        <button class="btn btn-primary" id="demoBtn">Check</button>
        <p id="demo"></p>

        <script>

        	const myBtn = document.getElementById('demoBtn');
        	if(myBtn){
            		myBtn.addEventListener("click", myFunction1);
       	 }
        
        	function myFunction1() {
                document.getElementById("demo").innerHTML = "Button Clicked, Element Found!";
        	}
         </script>

</body>
</html>

Output:

In the example, we’ll add a conditional statement to check if we get HTML element through method getElementById() or not. If the result is not null, we attach an event handler to an element – specifically the method addEventListener

Using the if statement will help you avoid the error “cannot read property ‘addEventlistener’ of null“. 

Now, when you pass an incorrect identifier to getElementById(), the addEventListener() method will not be called because of the null value, and the error will not occur.

Summary

In summary, I helped you learn how to fix the error “cannot read property ‘addEventlistener’ of nullin js through a few examples above. Thanks, and I hope this information is helpful to you.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *