2015-05-03 26 views
5

ich die folgenden FehlerUncaught Typeerror: kann nicht lesen Eigenschaft 'appendChild' von null

Uncaught TypeError: Cannot read property 'appendChild' of null

myRequest.onreadystatechange @ script.js:20

mit meinem folgenden 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> 

bekommen und hier ist mein JavaScript

// 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); 
Datei

Und hier ist der Inhalt von simple.txt

This is the contents of a simple text file.

Ich legte das Skript-Tag an der Unterseite des HTML as suggested by @Tejs here, aber ich bekomme immer noch diesen Fehler.

+5

Ich bin mir ziemlich sicher, dass der Code, den Sie versuchen, ist nicht das Gleiche wie hier aufgelistet. Weil es in Ordnung ist, überhaupt keine Probleme. http://plnkr.co/edit/cMsq1VNrr8stb8Oj4Xkb?p=preview – dfsq

+0

Es zeigt nicht den Inhalt von simple.txt unter meinem h1-Tag. Plus ich bekomme den Fehler in der Konsole – Sparky

+0

Sie hatten Recht. Ich hatte eine Verwechslung mit meinen Akten. Es funktioniert jetzt. Danke – Sparky

Antwort

8

Es gibt kein Element auf Ihrer Seite mit der ID "mainContent", wenn Ihr Callback ausgeführt wird.

In der Zeile:

document.getElementById("mainContent").appendChild(p); 

der Abschnitt document.getElementById("mainContent") Zurückkehren null

+0

Ich habe eine ID namens mainContent in meinem HTML. Ich vermisse etwas? – Sparky

+0

Ich bekomme den gleichen Fehler. – Sparky

+0

Vielen Dank. Es funktioniert jetzt. Ich hatte eine Verwechslung mit meinen Akten – Sparky

Verwandte Themen