Uncaught TypeError: kan eigenschap ‘appendChild’ van null niet lezen

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 95%

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.

  1. Gebruik
window.onload = () => {
    //write your code here
}
  1. 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:

https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect- laatste-chan/

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.

Fout

In Visual Studio door C# wordt dit probleem als volgt opgelost door Guid toe te voegen:

Guid

Zo ziet het eruit in de paginabron Bekijken:

OK


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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes