Solve - contains is not a function Error in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Kaibing Fan

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 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 are calling the contains method to check if a DOM Node is contained in another DOM node and you're getting 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 and make sure it's a valid DOM node.

If the Node you're calling the method on sometimes does not 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 condition uses the logical AND (&&) operator, so for the if block to run, all of 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 check the type of null - 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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee