About "getElementById is not a function" in JavaScript
Tags: javascript, webdev, beginners
Published: 2023-02-05 12:01:06

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/typeerror-getelementbyid-is-not-a-function-javascript) for a 💯 user experience. _~reza_

The error “TypeError: getElementById is not a function” happens for two common reasons (Based on StackOverflow users):

1. The capitalization of `“Id”` isn’t correct
2. Calling `getElementById()` on an element instead of the document object

Here’s what this error looks like in the browser’s console:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wmsfpv9o17szhjbwp0o.jpg)

## How to fix the “TypeError: getElementById is not a function” error

Before anything, let’s have a refresher from the **MDN Docs**:

> The `getElementById()` method returns an Element object representing the element whose id property matches the specified string.

As mentioned earlier, either the capitalization of ID is incorrect, or you’re calling this method on an element other than the document object.

**If the capitalization of “Id” isn’t correct:** It’s `getElementbyId()` and not `getElementbyID()` – Note the capitalized **D**.

Since we use ID as an abbreviation for identifier or identity document, it might feel natural to write it all in caps. But in the case of `getDocumentById()`, it has to be `Id` (with lowercase **d**):


```js
// ⛔ Incorrect
const element = document.getElementByID('id-string')

// Raises Uncaught TypeError: getElementById is not a function
Here's the correct form:


// ✅ Correct
const element = document.getElementById('id-string')
```

**If `getElementById()` is called on an element rather than the document object:** Unlike other element locators like `querySelector()` - that are available on Element objects - The `getElementById()` function is only available as a method of the document object. 

The reason is ID values are supposed to be unique throughout the document, and there is no need for "local" versions of `getElementById()`.

Let's suppose this is our HTML document:

```html
<!doctype html>
<html>
<head>
    <title>Testing document.getElementbyId()</title>
</head>
<body>
    <section id=container>
        <button id=button></button>
    </section>
</body>
</html>
```

To get the button element:

```js
// ✅ Correct form: 
const containerElement = document.getElementById('container')
const buttonElement = document.getElementByID('button')

// ⛔ But this raises the TypeError: getElementById is not a function error
buttonElement = containerElement.getElementByID('button')
```

Please note the ID string we pass to the function is also case-sensitive. So if the result of `getElementById()` is null, you might want to double check the ID string.

Here's an example:

```js
// ⚠️ returns null since the ID is button not Button
const button = document.getElementById('Button')

// ✅ This is correct
button = document.getElementById('button')
```

Alright, I think that does it. If you use the "TypeError: getElementById is not a function" in your Vue or React project, the solution would be the same.

I hope this quick guide helped you fix your problem.

Thanks for reading.

---

**❤️ You might like:**

- [How to check if an element exists in JavaScript (with examples)](https://www.decodingweb.dev/javascript-check-if-element-exists)
- [JavaScript isset Equivalent (3 methods)](https://www.decodingweb.dev/javascript-isset-equivalent)
- [TypeError: map is not a function in JavaScript in JavaScript (Fixed)](https://www.decodingweb.dev/fix-map-is-not-a-function-error-in-javascript)
- [SyntaxError: Unexpected end of JSON input in JavaScript (Fixed)](https://www.decodingweb.dev/syntaxerror-unexpected-end-of-json-input-in-javascript)
- [How to fix "ReferenceError: document is not defined" in JavaScript](https://www.decodingweb.dev/how-to-solve-referenceerror-document-is-not-defined)