En este artículo, veremos cómo podemos recibir un error » no se puede leer el estilo de propiedad nulo » en JavaScript, además de comprender la causa de este error con la ayuda de un ejemplo, y luego intentaremos entender cómo podemos corregirlo con ciertos pequeños cambios en el fragmento de código.
Cuando intentamos acceder a una propiedad, es decir, no contiene ningún valor (ni siquiera está definido correctamente) o no está definido en todo el fragmento de código, entonces existe la posibilidad de obtener este error. A continuación se muestra una representación pictórica de la consola del navegador que contiene un mensaje de error (en rojo).
Entenderemos el concepto a través de la ilustración.
Ejemplo 1: en este primero, crearemos un documento HTML (llamado » index.js «, o cualquier otro nombre definido por el usuario) y crearemos una etiqueta div que contenga algo de texto que inicialmente le daremos un color verde. mismo (fragmento de código que se muestra a continuación).
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <!-- This is really a bad technique to call JavaScript file just after the body tag--> <!-- This is the reason why we receive that shown error in console itself--> <script src="index.js"></script> <div id="id_1" style="color: green;"> GeeksforGeeks </div> </body> </html>
Producción:
Luego, crearemos otro archivo que es un archivo JavaScript (llamado » index.js «, o cualquier otro nombre definido por el usuario), que usaremos para acceder a la identificación del cuadro div y luego intentaremos mostrar su valor en la consola del navegador. e intentaremos cambiar su valor y luego buscaremos en la sección de salida qué valor exacto hemos visto cada vez que queremos cambiarlo o incluso mostrarlo.
Javascript
let id = document.getElementById("id_1");
console.log(id);
// Cannot read properties null error
// will be received...
id.style.color = "blue";
Ahora, nuevamente, cuando actualizaremos la página y abriremos la consola del navegador, se mostrará el siguiente resultado.
Producción:
Ahora, como podemos ver y visualizar, hemos recibido el valor de nulo y eso se debe a que hemos llamado a nuestra etiqueta de secuencia de comandos justo antes de la etiqueta div, por lo que es imposible que document.getElementById() obtenga el valor de identificación existente dentro de la etiqueta div.
Echemos un vistazo a otro ejemplo que muestra cómo podemos corregirlo con pequeños cambios incrustados en él.
Ejemplo 2: en este ejemplo, tomaremos en consideración todas las cosas que hemos hecho en el ejemplo anterior y, por lo tanto, aquí intentaremos hacer algunos cambios menores comenzando por llamar a la etiqueta <script> justo después de <div> etiquetar y también llamarlo, al final, es la mejor práctica que les ayudará a no ejecutarse infinitamente en algunas situaciones. Aquí está nuestro archivo HTML con algunos cambios.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <div id="id_1" style="color: green;"> GeeksforGeeks </div> <script src="index.js"></script> </body> </html>
A continuación se muestra nuestro archivo JavaScript que también tiene ciertos cambios en sí mismo.
Javascript
let id = document.getElementById("id_1");
console.log(id);
// This works perfectly now.....
id.style.color = "blue";
Producción:
A continuación se muestra la imagen de la consola del navegador que muestra el bloque div que contiene la identificación, así como los valores iniciales en sí mismo.
Nota: Recuerde siempre no llamar a la etiqueta del script justo después de la etiqueta del cuerpo para evitar ciertas situaciones inusuales con los archivos, así como con su carga y proceso de trabajo.
Publicación traducida automáticamente
Artículo escrito por amansingla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA