Ik krijg de volgende foutmelding
Uncaught TypeError: kan eigenschap ‘appendChild’ van null niet lezen
myRequest.onreadystatechange @ script.js:20
met mijn volgende 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>
En hier is mijn JavaScript-bestand
// 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);
En hier is de inhoud van simple.txt
Dit is de inhoud van een eenvoudig tekstbestand.
Ik heb de scripttag onderaan de html geplaatst zoals voorgesteld door @Tejs hiermaar ik krijg nog steeds deze foutmelding.
Antwoord 1, autoriteit 100%
Er is geen element op uw pagina met de id “mainContent” wanneer uw callback wordt uitgevoerd.
In de rij:
document.getElementById("mainContent").appendChild(p);
de sectie document.getElementById("mainContent")retourneert null
Antwoord 2, autoriteit 94%
Voor mensen die hetzelfde probleem hebben met querySelectorof getElementByIddie de volgende fout retourneert:
Uncaught TypeError: Cannot read property 'appendChild' of null
maar je hebt een klassenaam of id in de HTML…
Als uw scripttag in de head staat, wordt JavaScript vóór uw HTML geladen. U moet deferals volgt aan uw script toevoegen:
<script src="script.js" defer></script>
Antwoord 3, autoriteit 36%
Leuke antwoorden hier. Ik kwam hetzelfde probleem tegen, maar ik probeerde <script src="script.js" defer></script>maar ik werkte niet helemaal goed. Ik had alle code en links goed ingesteld. Het probleem is dat ik de js-bestandslink in de kop van de pagina had geplaatst, dus deze werd geladen voordat de DOM werd geladen. Hier zijn 2 oplossingen voor.
- Gebruik
window.onload = () => { //write your code here }
- Voeg de
<script src="script.js"></script>toe aan de onderkant van het html-bestand zodat het als laatste wordt geladen.
Antwoord 4, autoriteit 18%
degenen die querySelector of getElementById krijgen die de volgende fout retourneert:
Uncaught TypeError: Cannot read property 'appendChild' of null
of een andere eigenschap, zelfs als je een klassenaam of id in de HTML hebt
niet gebruiken (stel uit omdat het te veel browserafhankelijk is.)
<script src="script.js" defer></script> //don't use this
plaats in plaats daarvan al uw code in ‘script.js’ binnen
$(document).ready(function(){
//your script here.
}
Antwoord 5, autoriteit 9%
In plaats van uw scripttag te gebruiken die de bron van uw .js-bestand definieert in <head>, plaatst u deze onderaan uw HTML-code.
Antwoord 6, autoriteit 5%
Gebruik querySelector in plaats van getElementById();
var c = document.querySelector('#mainContent');
c.appendChild(document.createElement('div'));
Antwoord 7, autoriteit 5%
Als dit je overkomt in een AJAX-bericht, wil je de waarden die je verzendt vergelijken met de waarden die de controller verwacht.
In mijn geval had ik een parameter in een serialiseerbare klasse gewijzigd van State naar StateID, en veranderde vervolgens in een AJAX-aanroep het ontvangende veld uit ‘data’ niet
succes: functie (gegevens) {
MakeAddressForm.formData.StateID = data.State;
Merk op dat de klasse is gewijzigd – het maakt niet uit hoe ik het noem in de formData.
Dit creëerde een null-referentie in de formData die ik probeerde terug te posten naar de controller nadat ik de update had uitgevoerd. Het is duidelijk dat als iemand de status veranderde (wat het doel van het formulier was), ze de fout niet kregen, dus het was moeilijk te vinden.
Dit ook via een 500-fout. Ik plaats dit hier in de hoop dat het iemand anders de tijd bespaart die ik heb verspild
Antwoord 8
zet je javascript onderaan de pagina (dwz nadat het element is gedefinieerd..)
Antwoord 9
voeg uw scripttag toe aan de onderkant van de body-tag. zodat het script wordt geladen na html-inhoud, dan krijg je zo’n fout niet en add=
Antwoord 10
Had hetzelfde probleem bij het laden van extern zonder cache met Javascript
Load extern <script> zonder cache met Javascript
Had hier een goede oplossing voor het cacheprobleem:
Maar dit gebeurde: Uncaught TypeError: Kan eigenschap ‘appendChild’ van null niet lezen.
Hier is een goede uitleg: https://stackoverflow.com/a/58824439/14491024
Zoals gezegd is je scripttag in de head, het JavaScript wordt vóór je HTML geladen.
In Visual Studio door C# wordt dit probleem als volgt opgelost door Guid toe te voegen:
Zo ziet het eruit in de paginabron Bekijken:
Antwoord 11
U kunt uw externe JS-bestanden in Angular laden en u kunt ze direct laden in plaats van te definiëren in het index.html-bestand.
component.ts:
ngOnInit() {
this.loadScripts();
}
loadScripts() {
const dynamicScripts = [
//scripts to be loaded
"assets/lib/js/hand-1.3.8.js",
"assets/lib/js/modernizr.jr.js",
"assets/lib/js/jquery-2.2.3.js",
"assets/lib/js/jquery-migrate-1.4.1.js",
"assets/js/jr.utils.js"
];
for (let i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement('script');
node.src = dynamicScripts[i];
node.type = 'text/javascript';
node.async = false;
document.getElementById('scripts').appendChild(node);
}
}
component.html:
<div id="scripts">
</div>
Je kunt ook stijlen op dezelfde manier laden.
component.ts:
ngOnInit() {
this.loadStyles();
}
loadStyles() {
const dynamicStyles = [
//styles to be loaded
"assets/lib/css/ui.css",
"assets/lib/css/material-theme.css",
"assets/lib/css/custom-style.css"
];
for (let i = 0; i < dynamicStyles.length; i++) {
const node = document.createElement('link');
node.href = dynamicStyles[i];
node.rel = 'stylesheet';
document.getElementById('styles').appendChild(node);
}
}
component.html:
<div id="styles">
</div>