document.getElementByID is not a function error in your program.
This tutorial discusses what this error means and why it is raised. We’ll walk through an example of this error so you can learn what you need to know to fix it.
document.getElementByID is not a function
This method is used to manipulate the contents of an element or retrieve information about a particular element, such as its contents or its attributes.
IDs are defined in HTML. An ID must be unique to a particular element:
<header> tag has the ID
top_header. This ID is unique to the
<header> tag. IDs are often used to apply styles to particular elements using CSS.
document.getElementById() is case-sensitive. This method is not:
While it is tempting to write ID in capital letters because it is shorthand for another word, the method requires that you use an uppercase I and a lowercase d.
An Example Scenario
We’re going to build a code snippet that welcomes a user to our application. The welcome message will be in a title that appears at the top of our page.
For the purposes of this example, we’re going to use a demo name.
To start, define our body HTML code for the welcome section of the webpage:
<html> <body> <header> <h1 id="welcome_title">Welcome</h1> </header> </body> </html>
By default, our
<h1> tag will contain the contents
<header> tag is the parent tag in which our title is located. Next, we’re going to add a
… </header> <script> </script> </body> ...
Within our script, we are going to select our title and change its contents:
var title = document.getElementByID("welcome_title"); title.textContent = "Welcome, Luke!";
title. The contents of our title will be changed to display “Welcome, Luke!” We use the
textContent method to change the title.
Our code is not functioning correctly. Our title has not been changed:
We’ve used the incorrect case for the
document.getElementByID selector. Instead of using an uppercase I and a lowercase d, we have used an uppercase I and D.
getElementById function because the function name is case sensitive.
We need to change our code so that we use the correct cases for our function:
var title = document.getElementById("welcome_title"); title.textContent = "Welcome, Luke!";
We are now using
Id instead of
ID in our function call. Let’s run our new code:
Our program successfully changes the contents of our title to include the name of our user.
document.getElementById() method selects an element from the web page. This method lets you view and change the contents of an element.
When you use this method, you should make sure that you use the correct cases. ID is not in all capital letters. You need to use an uppercase I and a lowercase d for the method to work.