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:
- Using the script tag before declaring DOM elements.
- 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 null” in js through a few examples above. Thanks, and I hope this information is helpful to you.
Maybe you are interested:
- Cannot read property ‘style’ of Null in JavaScript
- Cannot set property ‘innerHTML’ of Null in JavaScript
- Cannot read Properties of Undefined in JavaScript
- Cannot find module ‘@babel/core’ error
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js
