Answer.js:6 Uncaught Typeerror: Cannot Read Property 'innertext' of Undefined
The innerHTML property lets you fix the contents of an element using JavaScript.
If you specify an invalid element with which to use the innerHTML method, or if you identify your script before the element appears on the folio, you'll encounter the "Uncaught TypeError: cannot set property 'innerHTML' of nada" error.
In this guide, we hash out what this error means and why you may encounter it. We'll walk through an instance of this error then you can acquire how to resolve it in your JavaScript code.
Uncaught TypeError: cannot ready property 'innerHTML' of null
The innerHTML property is associated with whatever web element that y'all are working with in JavaScript. Y'all may have selected a web element from the page using a "getter" like getElementById(), or yous may have created an element in JavaScript that you desire to modify.
The "cannot set property 'innerHTML' of zip" error is a blazon fault. This ways we are trying to apply a belongings or a office to a value that does non support a property or function.
In this example, we're trying to ready the value of innerHTML on an element that is equal to cypher. Nothing values do not take an innerHTML property.
There are 2 common causes of this mistake:
- Placing a script before an element appears on the spider web page
- Referencing the wrong element ID.
We're going to walk through the kickoff crusade, which is arguably the almost common mistake fabricated past beginners.
81% of participants stated they felt more confident about their tech task prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than half dozen months in career transition, from starting a bootcamp to finding their first task.
An Example Scenario
We're going to write a simple website that displays the time. To start, define a basic HTML folio. This HTML page will be the sheet on which we display the time:
<!DOCTYPE html> <html lang="en"> <caput> <title>Fourth dimension</title> </head> <body> <p>The time is <bridge id="show_time"></span>.</p> </torso> </html>
This HTML folio contains a <head> and a <trunk> tag. The <head> tag contains a <title> tag which defines the title for the web folio. The <trunk> tag contains a paragraph.
Inside the paragraph, we accept added a <span> tag. We're going to supplant the contents of this tag with the current time in our JavaScript code.
Next, write a script to retrieve the time. We'll add this JS lawmaking inside the <caput> tag:
… <championship>Fourth dimension</championship> <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> … Our document now contains HTML and JavaScript. The getElementById() method retrieves our show_time span tag. Nosotros then retrieve the current engagement using the JavaScript Date module.
On the next line of code, nosotros create a cord which displays the current hour of the day and the minute of the hour. This string uses the post-obit structure:
HH:MM
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Get exclusive 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 united states of america embed multiple values into the same string. Finally, nosotros apply the innerHTML method to display this time on our web page.
Let'due south open upward our web page in the web browser:
Our web folio fails to display the time. If nosotros expect at the JavaScript console, we can see an error:
Uncaught TypeError: show_time is zip
This is some other representation of the "cannot set property 'innerhtml' of goose egg". Information technology 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 null, we tin can infer that JavaScript was unable to successfully retrieve the element whose ID is show_time.
In this case, the cause is that we have placed our <script> tag likewise early in our program. Our <script> tag appears in the header of our folio. This is a problem considering without using an onload() function, nosotros tin can simply select elements that come up before our <script>.
To solve this error, we demand to move our <script> below our paragraph:
... <body> <p>The time is <span id="show_time"></span>.</p> </torso> <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 take moved our <script> tag beneath the <body> tag. Permit's try to open our web page over again:
The web page successfully displays the fourth dimension.
If this does not solve the error for you, brand sure that you lot correctly select the chemical element that you desire to piece of work with in your code. For instance, consider this line of code:
var show_time = document.getElementById("show_times"); If nosotros used this line of code to select our element, nosotros would run across the same error that we encountered earlier. This is because there is no element whose ID is "show_times".
"Career Karma entered my life when I needed it most and chop-chop helped me match with a bootcamp. 2 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 belongings 'innerHTML' of null" error is caused by trying to fix an innerHTML value for an element whose value is equal to null.
To solve this fault, make certain your <script> tag comes after the element that you want to select in your script. If this does non solve the effect, check to make sure yous are selecting a valid element in your program.
Source: https://careerkarma.com/blog/javascript-cannot-set-property-innerhtml-of-null/
0 Response to "Answer.js:6 Uncaught Typeerror: Cannot Read Property 'innertext' of Undefined"
Post a Comment