Cómo solucionar ‘Uncaught TypeError: Cannot read property of null’ en JavaScript nativo
Introducción El error ‘Cannot read property of null’ ocurre cuando intentas acceder a un método o propiedad de un elemento que no existe en el DOM. Generalmente se debe a un selector CSS incorrecto o a que el script se ejecuta antes de que el navegador termine de procesar el HTML. La solución inmediata es asegurar la existencia del nodo antes de manipularlo.
Solución Rápida (Código)
const btn = document.querySelector('.mi-boton');
// Solución 1: Optional Chaining
btn?.addEventListener('click', () => {
console.log('Click detectado');
});
// Solución 2: Validación previa
if (btn) {
btn.classList.add('active');
} else {
console.warn('El elemento .mi-boton no existe en el DOM');
}Explicación técnica
La causa raíz suele ser el ciclo de vida de carga del documento. Si el navegador encuentra la etiqueta <script> antes que el elemento HTML referenciado, el DOM engine devolverá null. Para evitar esto, es fundamental usar el atributo defer en la carga del script o colocarlo al final del <body>.
En términos de código moderno, el operador Optional Chaining (?.) es la herramienta más eficiente. Este operador detiene la evaluación si la referencia es null o undefined, evitando que el hilo de ejecución de JS se rompa con una excepción. Otra buena práctica es realizar una validación explícita con un bloque if, lo que permite manejar el error de forma controlada (por ejemplo, mostrando un mensaje de advertencia en la consola) sin afectar el resto de las funcionalidades de la aplicación. Evita siempre asumir que el elemento estará presente, especialmente en interfaces dinámicas.
Conclusión Asegurar la integridad de tus selectores es el primer paso para una web robusta. Si este problema persiste en aplicaciones más grandes, te invito a revisar nuestras guías sobre depuración avanzada en Chrome DevTools y gestión de estados en Vanilla JS.
