TypeError: null is not an object
This error occurs when you read a property or call a method on a null object . That's because the DOM API returns null for object references that are blank. An object is expected somewhere and wasn't provided. So, you will get null is not an object error if the DOM elements have not been created before loading the script. In JavaScript , null is not an object; and won't work. You must provide a proper object in the given situation.
Any JavaScript code which executes and deals with DOM (Document Object Model) elements should execute after the DOM elements have been created. JavaScript code is interpreted from top to down as lay out in the HTML. So, if there is a tag before the DOM elements, the JavaScript code within script tag will execute as the browser parses the HTML page . The lifecycle of an HTML page has three important events:
- DOMContentLoaded - the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures and stylesheets may be not yet loaded.
- load - the browser fully loaded the HTML and also external resources like images and stylesheets.
- unload (beforeunload) – the user is leaving the page.
DOMContentLoaded
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 .How to wait for the DOM ready event in plain JavaScript
You can do so by adding an event listener to the document object for the DOMContentLoaded event.
document.addEventListener('DOMContentLoaded', function(event) {
//the event occurred
})
addEventListener()
The addEventListener() works by adding a function or an object that implements EventListener to the list of event listeners for the specified event type on the EventTarget on which it's called. The DOMContentLoaded event happens on the document object . We must use addEventListener to catch it.
document.addEventListener('DOMContentLoaded',() => {
// handle DOMContentLoaded event
});
document.addEventListener('load',() => {
// handle load event
});
document.addEventListener('beforeunload',() => {
// handle beforeunload event
});
document.addEventListener('readystatechange', () => {
// handle readystatechange event
});
document.addEventListener('unload',() => {
// handle unload event
});
In the following example, we can resolve this type of issues by adding an event listener that will notify us when the page is ready. Once the addEventListener is fired, the init() method can make use of the DOM elements.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init() {
var goBtn = document.getElementById("goBtn");
var inTxt = document.getElementById("inTxt");
goBtn.onclick = function() {
var myMsg = inTxt.value;
showMessage(myMsg);
}
}
function showMessage(myMsg) {
var greeting = "Message : " + myMsg + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});
</script>
</head>
<body>
<h2>Message : </h2>
<p id="para">addEventListener() demo...</p>
<form>
<input type="text" id="inTxt" placeholder="Type your messge" />
<input type="button" id="goBtn" value="Go" />
</form>
</body>
</html>
Related Topics
- Uncaught TypeError: 'undefined' is not a function
- XMLHttpRequest cannot load no 'access-control-allow-origin'
- Uncaught RangeError: Maximum call stack size exceeded
- Uncaught TypeError: Cannot set property
- SecurityError: Blocked a frame with origin from accessing a cross-origin frame
- Unable to get property undefined or null reference
- SyntaxError: Cannot use import statement outside a module
- What is UnhandledPromiseRejectionWarning