document.getelementbyid(...) is null
When you run the above script , you will the get the error:
TypeError: document.getElementById(...) is null
If you change the order of the script after the element so that it's defined when getElementById is called.
So, make sure the script is placed in the bottom of the BODY element of the document you're trying to manipulate, not in the HEAD element or placed before any of the elements you want to "get".
Alternatively, you can check the null to solve this issue. The standard way to catch null and undefined simultaneously is this:
We can see a lot of these bugs are null or undefined errors. A good static type checking system like Typescript could help you avoid these errors if you use the strict compiler option. It can warn you if a type is expected but has not been defined. Even without Typescript, it helps to use guard clauses to check whether objects are undefined before using them.
HTML is an interpreted language. The DOMContentLoaded event fires when the initial HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. When the browser initially loads HTML and comes across a script area in the text, it can't continue building DOM. It must execute the script right now. So DOMContentLoaded may only happen after all such scripts are executed. The only exception are external scripts with async and defer attributes. They tell the browser to continue processing without waiting to load scripts . This lets the user see the page before scripts finish loading, which is good for performance.