. Advertisement .
..3..
. Advertisement .
..4..
Cannot read Property addEventListener of Null in JS is a common error that shows up in many ways. What is the cause of it and how to fix it? Let’s read this article, we will give you some solutions to fix it.
How Does The Error “Cannot read Property addEventListener of Null” In JS Happen?
When running your program, you easily encounter the following error:
Cannot read Property addEventListener of Null “Cannot read Property addEventListener of Null” is a fairly frequent problem in JavaScript. This error happens when JavaScript cannot add an event listener to an element to do a function. It also occurs when getElementById() function cannot help JS to locate the element using JS’s id.
How To Solve The Error “Cannot read Property addEventListener of Null” In JS?
Method 1: Make sure you are executing addEventListener on an element
Make sure you are executing addEventListener on an element when using JavaScript to fix the error “Cannot read Property addEventListener of Null”. To choose an element that has ID overlayBtn with getElementById, you can write as the following:
const el = document.getElementById("overlayBtn");
if (el) {
el.addEventListener("click", onClick, false);
}
Then, to see whether el is true or not, you can use an if statement.
If it is true, addEventListener can be called on it as it is an element in the case it is not null.
Method 2: The JavaScript code should be placed after the HTML code
The JavaScript code should be placed after the HTML code for it to load after HTML. Let’s examine this issue in greater detail through the following example:
<html><head>
<title>Javascript Function</title>
</head>
<body>
<div id="clickme">Fill Color Red</div>
<div id="mydiv" style="width: 100%; height: 200px;"></div>
<script>
const bclick = document.getElementById('clickme');
bclick.addEventListener('click', function red () {
mydiv.style.backgroundColor = 'red';
});
</script>
</body></html>Specifically in this example, we put it after the body tag. After doing that, the error completely disappear.
Method 3: Utilize jQuery document.ready method
Another method for you to solve the error “Cannot read Property addEventListener of Null” in JS is utilizing jQuery document.ready method. After the document has loaded, a function can be made available by using this method. The program you enter in the $ (document ). Once the DOM is prepared to run JavaScript code, the ready() method will work. You can avoid the Uncaught TypeError by using this technique.
Look at the instance below to understand more about this method:
<html><head>
<title>Javascript Function</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
const bclick = document.getElementById('clickme');
bclick.addEventListener('click', function red () {
mydiv.style.backgroundColor = 'red';
});
});
</script>
</head>
<body>
<div id="clickme">Fill Color Red</div>
<div id="mydiv" style="width: 100%; height: 200px;"></div>
</body></html>Conclusion
Conclusively, Cannot read Property addEventListener of Null in JS is an error you may encounter when running a program in JS. This article has provided you with helpful knowledge about this mistake and ways to fix it. We wish our article about this error were helpful to you. Comment below if you have trouble fixing this issue or if you have any questions for us. Thank you for reading!
Read more
→ Cannot read property ‘style’ of Null in JavaScript- How To Solve It?
Leave a comment