Uncaught Typeerror: Cannot Read Property 'push' of Null
The innerHTML holding lets you set the contents of an element using JavaScript.
If you specify an invalid element with which to use the innerHTML method, or if y'all place your script before the element appears on the page, y'all'll encounter the "Uncaught TypeError: cannot set property 'innerHTML' of nil" error.
In this guide, we hash out what this error means and why y'all may run across it. We'll walk through an example of this error and then you tin learn how to resolve it in your JavaScript lawmaking.
Uncaught TypeError: cannot set belongings 'innerHTML' of null
The innerHTML holding is associated with any web element that you lot are working with in JavaScript. You may accept selected a spider web element from the page using a "getter" like getElementById(), or you may have created an element in JavaScript that you want to modify.
The "cannot set property 'innerHTML' of null" error is a type fault. This means we are trying to use a property or a function to a value that does not support a property or function.
In this example, we're trying to set the value of innerHTML on an element that is equal to naught. Null values do not take an innerHTML property.
There are two common causes of this error:
- Placing a script earlier an element appears on the spider web page
- Referencing the wrong element ID.
We're going to walk through the starting time crusade, which is arguably the nigh common mistake made past beginners.
81% of participants stated they felt more than confident virtually their tech job prospects after attending a bootcamp. Go matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
An Example Scenario
Nosotros're going to write a simple website that displays the time. To outset, define a basic HTML page. This HTML page will be the canvass on which we display the time:
<!DOCTYPE html> <html lang="en"> <head> <title>Time</title> </head> <body> <p>The time is <span id="show_time"></span>.</p> </body> </html>
This HTML page contains a <head> and a <trunk> tag. The <head> tag contains a <title> tag which defines the title for the web folio. The <body> tag contains a paragraph.
Within the paragraph, we have added a <bridge> tag. We're going to replace the contents of this tag with the current fourth dimension in our JavaScript code.
Next, write a script to retrieve the time. We'll add together this JS lawmaking inside the <head> tag:
… <title>Time</title> <script> var show_time = document.getElementById("show_time"); var current_date = new Engagement(); var pretty_time = `${current_date.getHours()}:${current_date.getMinutes()}` show_time.innerHTML = pretty_time; </script> … Our document at present contains HTML and JavaScript. The getElementById() method retrieves our show_time span tag. We and so retrieve the electric current appointment using the JavaScript Date module.
On the next line of code, nosotros create a string which displays the current 60 minutes of the day and the infinitesimal of the hour. This cord uses the following structure:
HH:MM
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Get sectional scholarships and prep courses
There is a colon that separates the hour and minute values. We create this string using a technique called JavaScript string interpolation. This lets us embed multiple values into the same string. Finally, we use the innerHTML method to display this time on our web folio.
Let'south open up up our web page in the web browser:
Our web page fails to display the time. If we look at the JavaScript console, we tin can see an mistake:
Uncaught TypeError: show_time is null
This is another representation of the "cannot set belongings 'innerhtml' of null". It tells us the element on which we are trying to set the value of innerHTML is null.
The Solution
Because the value of show_time is zilch, nosotros can infer that JavaScript was unable to successfully retrieve the element whose ID is show_time.
In this instance, the cause is that we take placed our <script> tag too early in our program. Our <script> tag appears in the header of our page. This is a problem because without using an onload() function, we can but select elements that come up before our <script>.
To solve this mistake, we need to motion our <script> below our paragraph:
... <body> <p>The time is <span id="show_time"></bridge>.</p> </body> <script> var show_time = document.getElementById("show_time"); var current_date = new Date(); var pretty_time = `${current_date.getHours()}:${current_date.getMinutes()}` show_time.innerHTML = pretty_time; </script> … We have moved our <script> tag below the <body> tag. Allow'southward try to open our web page again:
The web page successfully displays the time.
If this does not solve the error for you, brand sure that you correctly select the element that you desire to work with in your code. For case, consider this line of code:
var show_time = document.getElementById("show_times"); If we used this line of code to select our chemical element, nosotros would see the same fault that nosotros encountered before. This is because there is no element whose ID is "show_times".
"Career Karma entered my life when I needed it most and quickly helped me friction match with a bootcamp. Two months later graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Conclusion
The "Uncaught TypeError: cannot set property 'innerHTML' of zero" fault is caused by trying to set up an innerHTML value for an chemical element whose value is equal to cypher.
To solve this mistake, make sure your <script> tag comes after the element that yous want to select in your script. If this does not solve the event, bank check to brand sure you are selecting a valid element in your program.
Source: https://careerkarma.com/blog/javascript-cannot-set-property-innerhtml-of-null/
0 Response to "Uncaught Typeerror: Cannot Read Property 'push' of Null"
Post a Comment