me sale el siguiente error
TypeError no capturado: no se puede leer la propiedad 'appendChild' de null
myRequest.onreadystatechange @ script.js:20
con mi siguiente código
// 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>Y aquí está mi archivo 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); Y aquí está el contenido de simple.txt
Este es el contenido de un archivo de texto simple.
Puse la etiqueta del script en la parte inferior del html como lo sugirió @Tejs aquí , pero sigo recibiendo este error.
Para las personas que tienen el mismo problema de querySelector o getElementById que devuelve el siguiente error:
Uncaught TypeError: Cannot read property 'appendChild' of nullpero tienes un nombre de clase o id en el HTML...
Si su etiqueta de secuencia de comandos está en el encabezado, el JavaScript se carga antes que su HTML. Deberá agregar defer a su secuencia de comandos de esta manera:
<script src="script.js" defer></script>No hay un elemento en su página con la identificación "mainContent" cuando se ejecuta su devolución de llamada.
En la linea:
document.getElementById("mainContent").appendChild(p); la sección document.getElementById("mainContent") devuelve null
Buenas respuestas aquí. Encontré el mismo problema, pero probé <script src="script.js" defer></script> pero no funcionó del todo bien. Tenía todo el código y los enlaces configurados bien. El problema es que puse el enlace del archivo js en el encabezado de la página, por lo que se cargó antes de que se cargara el DOM. Hay 2 soluciones para esto.
window.onload = () => { //write your code here }
<script src="script.js"></script> al final del archivo html para que se cargue al final.