Solve - contains is not a function Error in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 27, 2022

banner

Check out my new book

Solve - contains is not a function Error #

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

  • trying to use the contains() method to check if a value is contained in an array or string.
  • calling the contains() method on a value that is not a valid DOM Node.

typeerror contains is not a function

Here is an example of how the error occurs.

index.js
const str = 'one two three'; // ⛔️ Uncaught TypeError: str.contains is not a function const result1 = str.contains('two'); const arr = ['one', 'two', 'three']; // ⛔️ Uncaught TypeError: arr.contains is not a function const result2 = arr.contains('two');

We called the contains method to see if a string is contained in an array and if a substring is contained in a string.

To solve the "contains is not a function" error, use the includes() method to check if a value is contained in an array, or if a substring is contained in a string, e.g. arr.includes('example'). The method returns the result as a boolean value.

index.js
const str = 'one two three'; const result1 = str.includes('two'); console.log(result1); // 👉️ true const arr = ['one', 'two', 'three']; const result2 = arr.includes('two'); console.log(result2); // 👉️ true

We used the String.includes method to check if a substring is contained in a string and the Array.includes method to check if a value is contained in an array.

If you use the contains method to check if a DOM Node is contained in another DOM node and you get the "Contains is not a function" error, then you're not calling the method on a valid DOM Node.

Here is an example of how the Node.contains method is used.

index.js
const box = document.getElementById('box'); console.log(document.contains(box)); // 👉️ true

You can console.log the value you're calling the contains method on to make sure it's a valid DOM node.

If the Node you're calling the method on sometimes doesn't exist, you can conditionally check if the Node is there before calling the contains method on it.

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

index.js
const box = null; const nested = document.getElementById('nested'); if (typeof box === 'object' && box !== null && 'contains' in box) { console.log(box.contains(nested)); }

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

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

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

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

Then we know we can safely call the contains method on the object.

This approach is called duck-typing.

When using duck-typing, we simply check if the object implements specific properties or methods and if it does, we assume it's an object of the correct type.

Use the search field on my Home Page to filter through my more than 3,000 articles.