“TypeError: querySelectorAll is not a function” in JS is an error that is not difficult to fix. In this article, I will give some cases and how to fix them, let me clarify in this article.
Why does the “TypeError: querySelectorAll is not a function” in JS happen?
“TypeError: querySelectorAll is not a function” in JS error usually occurs for the following reasons:
- Use querySelectorAll is the wrong syntax
- Use another object DOM element and Document Object to call querySelectorAll()
- Declare DOM elements after the Javascript statement tag
The error message occurs as follows:
TypeError: querySelectorAll is not a functionHow to fix this error?
Use querySelectorAll is the wrong syntax
Make sure you use the querySelectorAll() method correctly, or your program will throw an error TypeError: querySelectorAll is not a function in JS.
Syntax:
document.querySelectorAll(selectors)
Parameters – Description:
- selectors: This is a series of one or more CSS selectors. If the set is not valid, it will throw a SyntaxError.
The querySelectorAll() method will return a NodeList containing one or more elements matching the tuple passed in the parameter or possibly an empty NoneList if no elements match the tuple in the parameter.
To avoid this error, make sure you use the correct syntax when using the querySelectorAll() method.
Using wrong object to call querySelectorAll() method
QuerySelectorAll() method is only called by two objects, document object and DOM element. If you use another object to call the querySelectorAll() method, the program will throw an error TypeError: querySelectorAll is not a function in JS.
Example:
const demos = document.querySelectorAll('.demo');
const box = demos.querySelectorAll('.box');Output:
TypeError: querySelectorAll is not a functionIf we try with any other object, we can only call querySelectorAll() method with a document object or DOM element, and our program will crash.
Example:
if (typeof document !== "undefined") {
document.getElementById("El");
}Declare DOM elements after the Javascript statement tag
Suppose we put the ‘js’ statement tag before the DOM elements. In that case, the ‘js’ statement will run before the DOM statements have not been declared, and you won’t be able to access it, and the TypeError: querySelectorAll is not a function in JS error will appear. So we should put the script tag at the end of the body tag.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>LearnShareIT</h1>
<div class = "product">
<div class = "name"></div>
</div>
<div class = "product">
<div class = "name"></div>
</div>
<div class = "product"></div>
<div class = "product"></div>
<script src = "main.js"></script>
</body>
</html>My program no longer shows errors.
Summary
I have solved the error “TypeError: querySelectorAll is not a function” in JS. As you can see, this error is not difficult to fix, so follow this article and follow me. I hope this article will be of help to you. Good luck.
Maybe you are interested:
- Uncaught SyntaxError Unexpected end of input
- TypeError: indexOf is not a function in JavaScript
- TypeError: filter is not a function in JavaScript
- TypeError: Converting circular structure to JSON in JS
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
