The ‘cannot read property addEventListener of undefined’ error occurs due to one of the following reasons –
- The addEventListener method is called on an element that doesn’t exist.
- The script is placed above the HTML element on which the addEventListener method is called.
Let’s have a look at each of these reasons and solutions in detail.
1) The addEventListener Method Is Called On An Element That Doesn’t Exist
This is the most common reason for the ‘cannot read property addEventListener of undefined’ error. It occurs when you try to add an event listener to an element that doesn’t exist in the DOM.
For example, consider the following code snippet –
const button = document.querySelector('id-that-does-not-exist'); //
button.addEventListener('click', () => {
console.log('Button clicked!');
});In the above code, we are trying to add a ‘click’ event listener to an element. However, if there is no such element in the DOM, the code will throw an error.
To fix this, you need to make sure that the element exists in the DOM before adding an event listener to it.
You can add an if statement to check if the element exists or not.
const button = document.querySelector('id-that-does-not-exist');
if(button) {
button.addEventListener('click', () => {
console.log('Button clicked!');
});
} else {
console.log('The button does not exist in the DOM');
}Another way to fix this issue is to use a ? operator.
const button = document.querySelector('id-that-does-not-exist');
button?.addEventListener('click', () => {
console.log('Button clicked!');
});The ? operator returns the value of the button if it exists, and undefined if it doesn’t exist. So, when used with the addEventListener method, it will only add an event listener if the button exists.
2) The Script Is Placed Above The HTML Element On Which The addEventListener Method Is Called
If you place your script before the HTML element on which you’re trying to call the addEventListener method, it will result in an error.
This is because, when the code is executed, the HTML element doesn’t exist yet and thus cannot be selected.
For example, the following code will result in an error.
<html>
<head>
<script>
const button = document.getElementById('button');
button.addEventListener('click', () => {
console.log('Button clicked!');
});
</script>
</head>
<body>
<button id = "button">Click me!</button>
</body>
</html>Here, the script is added in the head section of the HTML, whereas the button element is added in the document body. So, the button element is not parsed by the time it is called.
To fix this, you need to make sure that your script is placed after the HTML element on which you’re trying to call the addEventListener method.
For example, the following code will work fine.
<html>
<head>
</head>
<body>
<button id = "button">Click me!</button>
<script>
const button = document.getElementById('button');
button.addEventListener('click', () => {
console.log('Button clicked!');
});
</script>
</body>
</html>You can also use the jQuery document.ready() method to make sure that the code is executed only after the document is ready.
Here, the function passed to the document.ready() method is executed only when the document is ready. So, this will make sure that the HTML element exists before adding an event listener to it.
Conclusion
In this article, we saw how to fix the “cannot read property addEventListener of undefined” error in JavaScript. We also saw some common mistakes that can cause this error.
I hope you found this article helpful and that you now understand how to fix this error.
If you have any questions, please feel free to post them in the comments section below.
Happy coding!