TypeError: addEventListener is not a function in JavaScript

# TypeError: addEventListener is not a function in JavaScript

The "TypeError: addEventListener is not a function" error occurs for multiple reasons:

Calling the method on an object that is not a valid DOM element.
Placing the JS script tag above the code that declares the DOM elements.
Misspelling the addEventListener method (it's case-sensitive).

addeventlistener is not a function

Here is an example of how the error occurs.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.getElementsByClassName('box');

console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ TypeError: boxes.addEventListener is not a function
boxes.addEventListener('click', function onClick() {
  console.log('box clicked');
});

We got the error because we called the addEventListener method on the array-like object that the getElementsByClassName method returns.

Notice that in our HTML file, we placed the index.js script at the bottom of the body tag, after the DOM elements.

This is important because if you run the script before having created the DOM elements, they won't be accessible in your JS code.

To solve the "addEventListener is not a function" error, make sure to call the addEventListener() method on a valid DOM element, or the document or window objects, and place the JS script tag at the bottom of the body tag in your HTML.

index.js

Copied!
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ✅ addEventListener to first box
boxes[0].addEventListener('click', function onClick() {
  console.log('box clicked');
});

// ✅ addEventListener to all boxes
for (const box of boxes) {
  box.addEventListener('click', function onClick() {
    console.log('box clicked');
  });
}

call addeventlistener on valid dom element

The code for this article is available on GitHub

The first example calls the addEventListener method on the first element in the array-like object.

The second example shows how to iterate over the div elements to add an event listener to each.

If the error persists, make sure that you haven't spelled addEventListener wrong.

You can also console.log the element you are calling the method on.

Make sure you're calling the addEventListener method on a valid DOM element, or on the Document or Window objects.

# Check if the element exists before calling `addEventListener`

If the element you're calling the method on sometimes doesn't exist, conditionally check if the element is there before calling the addEventListener method.

For example, a basic DOM element has a type of object, so we can check if the value is an object and contains the addEventListener property before calling the method.

index.js

Copied!
const box = null;

if (
  typeof box === 'object' &&
  box !== null &&
  'addEventListener' in box
) {
  box.addEventListener('click', function onClick() {
    console.log('box clicked');
  });
}

The code for this article is available on GitHub

Our if condition uses the logical AND (&&) operator. For the if block to run, all conditions have to be met.

We first check if the box variable stores a value with a type of object, because DOM elements have a type of object.

Then we check if the variable is not equal to null. Unfortunately, if you check the type of null with console.log(typeof null), you would get an "object" value back, so we have to make sure the value is not null.

index.js

Copied!
console.log(typeof null); // 👉️ object

The last thing we check for is that the object contains the addEventListener property.

Then we know that we can safely call the addEventListener method on the object.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: addEventListener is not a function in JavaScript