TypeError: getElementById is not a function in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 2, 2024
3 min

banner

# TypeError: getElementById is not a function in JavaScript

The "getElementById is not a function" error occurs for 2 reasons:

  1. Misspelling the getElementById method (the name is case-sensitive)
  2. Using the getElementById method on an element instead of the document object.

typeerror getelementbyid is not a function

# Spelling the getElementById() method incorrectly

Here is an example of how the error occurs.

index.js
// ⛔️ notice capital D in id - (should be getElementById) const btn = document.getElementByID('btn'); // ✅ correct const btn = document.getElementById('btn');

We misspelled the document.getElementById method which caused the error.

The code for this article is available on GitHub

# Calling the getElementById() on an element that is not the document

The error also occurs if you call the getElementById() method on an element that is not the document.

index.js
// ------------------------------------------- // ⛔️ using the method on another element instead of the document btn.getElementById('box'); // ✅ correct const box = document.getElementById('box')
The code for this article is available on GitHub

In the second example, we called the getElementById method on an element that's not the document object.

There can only be a single element on the page with a particular ID, so it doesn't make sense for the method to be scoped to a specific element. The method can only be used on the document object.

# Using the document.getElementById() method correctly

Make sure to spell the getElementById() method correctly, as it is case-sensitive, and only call the method on the document object.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ button with `id` of `btn` --> <button id="btn">Click me</button> <!-- ✅ Your JS script here ✅ --> <script src="index.js"></script> </body> </html>

Now we can call the getElementById method on the document object.

index.js
// ✅ Works const btn = document.getElementById('btn'); console.log(btn); // 👉️ button#btn

using getelementbyid method correctly

The code for this article is available on GitHub

We spelled the getElementById method correctly and called it on the document object, so everything worked as expected.

The document.getElementById method can only be called on the document object because there is only 1 element with a given id in the DOM.

# Make sure to specify the correct identifier in the call to getElementById

Assuming we have the HTML from the previous code sample.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ button with `id` of `btn` --> <button id="btn">Click me</button> <!-- ✅ Your JS script here ✅ --> <script src="index.js"></script> </body> </html>

When calling the document.getElementById() method, make sure to pass it the correct id as identifiers are case-sensitive.

index.js
// ✅ Works const btn = document.getElementById('btn'); console.log(btn); // 👉️ button#btn // ⛔️ returns null const notBtn = document.getElementById('BTN'); console.log(notBtn); // 👉️ null

specify correct identifier

The code for this article is available on GitHub

The first call to the getElementById() method works as expected and returns the correct element.

The second call to the method returns null because we misspelled the id of the element.

When the getElementById method is called with an id that doesn't exist, null is returned.

# Using querySelector instead of getElementById

There are other methods like querySelector that can be called on the document object or a specific element.

Here is an example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> </head> <body> <div id="box"> <div class="first">Box 1</div> <div class="second">Box 2</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// 👇️ calling getElementById() on the document const box = document.getElementById('box'); // 👇️ calling querySelector on an element const second = box.querySelector('.second'); console.log(second); // 👉️ div.second
The code for this article is available on GitHub

The querySelector method takes a selector and returns the first element in the DOM that matches the given selector.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.