Menu
I'm getting the following error
Uncaught TypeError: Cannot read property 'appendChild' of null
myRequest.onreadystatechange @ script.js:20
with my following code
// index.html <html> <head> <title>Simple Page</title> </head> <body> <div id="mainContent"> <h1>This is an AJAX Example</h1> </div> <script type="text/javascript" src="script.js"></script> </body> </html> And here is my JavaScript file
// script.js // 1. Create the request var myRequest; // feature check! if(window.XMLHttpRequest) { // Firefox, Safari myRequest = new XMLHttpRequest(); } else if (window.ActiveXObject){ // IE myRequest = new ActiveXObject("Microsoft.XMLHTTP"); } // 2. Create an event handler for our request to call back myRequest.onreadystatechange = function() { console.log("We were called!"); console.log(myRequest.readyState); if(myRequest.readyState === 4){ var p = document.createElement("p"); var t = document.createTextNode(myRequest.responseText); p.appendChild(t); document.getElementById("mainContent").appendChild(p); } }; // 3. open and send it myRequest.open("GET","simple.txt", true); // any parameters? myRequest.send(null); And here is the contents of simple.txt
This is the contents of a simple text file.
I put the script tag at the bottom of the html as suggested by @Tejs here but I'm still getting this error.
938
The "Cannot read property 'appendChild' of null" error occurs when trying to call the appendChild method on a DOM element that doesn't exist. To solve the error, make sure to only call the appendChild method on valid DOM elements.
The "Cannot read property 'click' of null" error occurs when trying to call the click method on a null value. To solve the error, run the JS script after the DOM elements are available and make sure you only call the method on valid DOM elements.
The appendChild() is a method of the Node interface. The appendChild() method allows you to add a node to the end of the list of child nodes of a specified parent node.
Element. append() can append several nodes and strings, whereas Node. appendChild() can only append one node.
For people who have the same issue of querySelector or getElementById that returns the following error:
Uncaught TypeError: Cannot read property 'appendChild' of null but you have a class name or id in the HTML...
If your script tag is in the head, the JavaScript is loaded before your HTML. You will need to add defer to your script like so:
<script src="script.js" defer></script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
