Como desarrollador web, seguro que te encuentras con errores cuando trabajas con JavaScript. Los errores de programación impiden que el programa haga lo que se espera de él.

Para poder solucionar estos errores, tienes que ser capaz de entender el mensaje de error, ya que esto te ayudará a comprender por qué se ha producido el error y cómo solucionarlo.

En este tutorial, hablaremos del error «uncaught typeerror: cannot set property» en JavaScript.

Aprenderás por qué se produce este error, las distintas razones por las que puedes encontrarlo y los distintos métodos para solucionarlo.

¿Qué Significa «Uncaught Typeerror: Cannot Set Property» en JavaScript?

Un typeerror se produce principalmente cuando realizas una operación que implica tipos de datos incompatibles. En nuestro caso, se trata del error «uncaught typeerror: cannot set property», un error de JavaScript que se produce principalmente cuando intentas asignar una propiedad a un elemento DOM con un valor null.

Este error puede producirse por diferentes motivos, como:

  • Colocar la etiqueta script en una posición incorrecta en tu marcado
  • Errores ortográficos al hacer referencia a elementos DOM
  • Acceso a un elemento DOM no definido o no válido

En las siguientes secciones, analizaremos los motivos anteriores, cómo pueden provocar el error «uncaught typeerror: cannot set property» con ejemplos de código, y cómo solucionar el error.

También hablaremos de cómo puedes determinar si una variable es null o undefined.

¡Empecemos!

Cómo Solucionar el Error «Uncaught Typeerror: Cannot Set Property» en JavaScript

En esta sección, conocerás las causas más comunes del error «uncaught typeerror: cannot set property» en JavaScript. Cada subsección que sigue está dedicada a una de esas causas y a su solución.

También podrás ver cómo solucionar el error con algunos ejemplos prácticos de código.

Posición No Válida de la Etiqueta script

Cuando se carga una página web, también se carga el código JavaScript escrito para la página. La forma en que JavaScript reconoce el Modelo de Objetos del Documento (DOM) depende de dónde coloques la etiqueta script en tu código.

Si colocas la etiqueta script dentro de la etiqueta head o por encima de todos los elementos HTML dentro de la etiqueta body, el script se ejecutará antes de que el DOM esté listo.

Cuando JavaScript se ejecuta antes de que el DOM esté listo, no consigue obtener una representación completa del DOM, lo que significa que la mayoría de tus variables vinculadas a elementos del DOM se devolverán como null.

Aquí tienes un ejemplo de código que provocaría el error «uncaught typeerror: cannot set property» en JavaScript debido a la posición de la etiqueta script:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

El código anterior tiene la etiqueta script colocada dentro de la etiqueta head. También tenemos un elemento h1 con una etiqueta id de heading.

A continuación, intentaremos asignar texto al elemento h1:

let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Aunque el código anterior parece correcto, se produjo el error «uncaught typeerror: cannot set property». Esto ocurrió porque el script ya se había cargado antes que el DOM, por lo que nuestro JavaScript no tenía conocimiento de los elementos del DOM.

Este error también se producirá si colocas la etiqueta script encima de otros elementos del DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="heading"></h1>
  </body>
</html>

Ahora la etiqueta script está por encima de los elementos del DOM en la etiqueta body, pero seguirá apareciendo el error «uncaught typeerror: cannot set property» porque el script se carga antes que el DOM.

Para solucionar este error, tienes que colocar la etiqueta script justo antes de la etiqueta de cierre body. De esta forma, todos los elementos del DOM se cargarán antes que el script.

He aquí un ejemplo de la colocación correcta:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'

Cuando se ejecute el código anterior, el elemento h1 tendrá su textContent ajustado a «This is a heading». No se producirá ningún error.

Errores Ortográficos

Los errores ortográficos son otra fuente de aparición del error «uncaught typeerror: cannot set property».

Cuando escribes mal el atributo (ID o clase) utilizado para identificar un elemento DOM en JavaScript, haces referencia a un elemento inexistente, lo que devolverá un valor null.

Si intentas asignar un valor a un valor null, se producirá el error «uncaught typeerror: cannot set property».

Aquí tienes un ejemplo de código para ayudarte a entenderlo:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

En el código anterior, tenemos una etiqueta h1 con un id de heading.

En el código JavaScript, hicimos referencia a la id pero con un error ortográfico. En lugar de «heading», escribimos «headin», es decir, document.getElementById('headin'); en lugar de document.getElementById('heading');.

Para evitar este tipo de errores, asegúrate siempre de que tus elementos DOM se referencian correctamente, utilizando el atributo correcto con la ortografía adecuada.

Acceder a un Elemento DOM Indefinido

En la última sección, hemos visto cómo hacer referencia a un atributo mal escrito puede provocar un error «uncaught typeerror: cannot set property». Lo mismo ocurre cuando intentamos acceder a un elemento del DOM que no existe.

En el ejemplo siguiente, intentaremos acceder a un atributo id que aún no se ha definido en el marcado:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Como se puede ver arriba, estamos intentando establecer el textContent de un elemento DOM que no existe. No hay ningún elemento en nuestro código HTML que tenga un id de «heading», así que esto devuelve un valor null.

Si pasas a registrar la variable heading en la consola, obtendrás un valor devuelto de null.

Cómo Determinar si una Variable es «null» o «undefined»

Llegados a este punto, ya habrás comprendido que si asignas un valor a una variable que es null o undefined, lo más probable es que se produzca un error del tipo «uncaught typeerror: cannot set property».

Pero puedes determinar si una variable es null o undefined; antes de interactuar con ellas. Aunque esto no soluciona el error, aclara por qué no funciona una funcionalidad.

Antes de hablar de cómo determinar si una variable es null o undefined en JavaScript, es importante entender la diferencia entre un valor null y undefined.

Una variable es null cuando se le asigna un valor vacío o desconocido. Las secciones anteriores de este tutorial muestran ejemplos prácticos de una variable null.

En cambio, una variable es undefined cuando no se le ha asignado ningún valor:

let age;
console.log(age);
// undefined

En el código anterior, se declaró la variable age, pero no se le asignó ningún valor. Cuando se registró en la consola, se devolvió undefined.

Ahora que conoces la diferencia entre null y undefined, vamos a ver cómo puedes determinar si una variable es una de las dos cosas.

Puedes utilizar el operador de igualdad suelto (==) para determinar si una variable es null o undefined. Aquí tienes un ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="headin"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}

En el código anterior, cometimos un error ortográfico al hacer referencia a un elemento DOM en JavaScript.

Mediante una sentencia if, comprobamos si el valor de la variable heading era null: if (heading == null) {...}

Como devolvía un valor null, en la consola aparecería «Variable es nula — no se puede asignar valor a una variable nula». Si no hubiéramos obtenido un valor null, se habría ejecutado el código del bloque else.

Si te preguntas por qué no incluimos undefined en la sentencia if, es porque null == undefined en JavaScript, por lo que el código de la sentencia if comprueba ambos errores.

Resumen

Los mensajes de error pueden ser confusos en algunos casos, pero ayudan a los desarrolladores a averiguar por qué su código no funciona para poder solucionarlo y evitar que vuelva a ocurrir en el futuro.

Aunque a nadie le gustan los errores, son una buena forma de ayudarte a entender mejor tu lenguaje de programación favorito.

Es más, solucionar un error de programación te da más contexto cuando te encuentras con un error similar en un proyecto diferente. El error del que hemos hablado en este artículo no sólo se produce cuando trabajas en proyectos vanilla JavaScript — también puedes encontrarlo cuando trabajas con frameworks y bibliotecas de JavaScript.

Si vas a crear una aplicación o un sitio web, hay una gran variedad de habilidades que aprender y mucha práctica necesaria para utilizar estas habilidades de manera eficiente. El nuevo Nivel Hobby de Kinsta proporciona la plataforma de alojamiento perfecta para todos los que necesitan un espacio para practicar, desde los nuevos programadores en ciernes hasta los desarrolladores experimentados que buscan dar a conocer su trabajo o desplegar aplicaciones de prueba de concepto. Y si hoy te registras en cualquier nivel, obtendrás 20 $ de descuento en tu primer mes.