If you receive an error message like this “document.getElementsByClass is not a Function” in JavaScript when trying to get the class name of an HTML element. Find out the solution in this post.
Why do we have error message “document.getElementsByClass is not a Function” in JavaScript ?
In JavaScript, we can use the getElementsByClassName method to get all the HTML elements with the same value of the name attribute. Obviously, you can see the error here is that you used the wrong syntax. This is a pretty common mistake when working with the getElementsByClassName method.
// Wrong syntax
document.getElementsByClass()
// Correct syntax
document.getElementsByClassName()How to fix this error?
Let’s go through the example below, you will understand the correct usage for this method and know how to fix the error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class = "container">
<p class="example">Element 1</p>
<p class="example">Element 2</p>
<div class="example">Element 3</div>
<div class = "example test">Element 4</div>
</div>
<script>
const collection = document.getElementsByClassName("example");
console.log(collection);
</script>
</body>
</html>Output:
getElementsByClassName() returns an HTMLCollection – you can think of it as a list. In this example, we got a list with four elements. All of them have the value “example” in the class attribute.
Since this method returns an HTMLCollection object which looks like an array, we can loop through the elements in this array using the for loop.
<script>
const myElements= document.getElementsByClassName('example');
for (myElement of myElements) {
console.log(myElement);
}
</script>Output:
However, it must be noted that the return result is just an array-like object, not really an array object in JavaScript. Therefore, you will not be able to apply array methods to output, e.g map(), forEach() ,reverse()…
You can also pass in multiple class names simultaneously if you want to get all elements whose class is all the values you pass in. Change the script to the following:
<script>
const collection = document.getElementsByClassName("example test");
console.log(collection);
</script>Output:
Beside the error we are discussing, one of the common mistakes is to use getElementByClassName() instead of getElementsByClassName(). It should be ‘Elements‘, not ‘Element‘. The letter ‘s‘ is missing.
That’s the way we can use the getElementsByClassName method. Remember to use the correct syntax because it is easy to get confused.
Summary
So the error document.getElementsByClass is not a Function in JavaScript has been solved. It is an error caused by a syntax error. Please pay attention to that.
Maybe you are interested:
- Error: Cannot find module ‘node-sass’
- TypeError (intermediate value)(…) is not a function in JS
- unexpected token o in json at position 1 error in js
- Cannot convert undefined or null to Object in JavaScript
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