Setproperty Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

La propiedad innerHTML le permite establecer el contenido de un elemento usando JavaScript.

Si especifica una propiedad no válida elemento con el que utilizar el método innerHTML, o si coloca su secuencia de comandos antes de que el elemento aparezca en la página, encontrará el " Error de tipo no detectado: no se puede establecer la propiedad " innerHTML " de nulo " error.

En esta guìa, analizamos qué significa este error y por qué puede encontrarlo. Veremos un ejemplo de este error para que pueda aprender a resolverlo en su còdigo JavaScript.

Error de tipo no detectado: no se puede establecer la propiedad " innerHTML " of null

La propiedad innerHTML está asociada con cualquier elemento web con el que esté trabajando en JavaScript. Es posible que haya seleccionado un elemento web de la página utilizando un " getter " como getElementById () , o puede que haya creado un elemento en JavaScript que desee modificar.

El " no puede establecer la propiedad " innerHTML " de nulo " error es un tipo de error. Esto significa que estamos intentando aplicar una propiedad o funciòn a un valor que no admite una propiedad o funciòn.

En este caso, estamos intentando establecer el valor de innerHTML en un elemento que es igual a nulo. Los valores nulos no tienen una propiedad innerHTML.

Hay dos causas comunes de este error:

  • Colocar un script antes de que aparezca un elemento en el página web
  • Hacer referencia al ID de elemento incorrecto.

Vamos a analizar la primera causa, que es posiblemente el error más com√∫n que cometen los principiantes.

Un ejemplo de escenario

Vamos a escribir un sitio web sencillo que muestre la hora. Para empezar, defina una página HTML básica. Esta página HTML será el lienzo en el que mostraremos la hora:

Esta página HTML contiene una etiqueta "head" y "body". La etiqueta "head" contiene una etiqueta "title" que define el tìtulo de la página web. La etiqueta "body" contiene un párrafo.

Dentro del párrafo, hemos agregado una etiqueta "span" . Reemplazaremos el contenido de esta etiqueta con la hora actual en nuestro còdigo JavaScript.

A continuaciòn, escriba un script para recuperar la hora. Agregaremos este còdigo JS dentro de la etiqueta "head":

Nuestro documento ahora contiene HTML y JavaScript. El método getElementById () recupera nuestra etiqueta de intervalo show_time. Luego, recuperamos la fecha actual usando el Mòdulo de fecha de JavaScript .

En la siguiente lìnea de còdigo, creamos una cadena que muestra la hora actual del dìa y el minuto. de la hora. Esta cadena utiliza la siguiente estructura:

HH: MM

Hay dos puntos que separan los valores de hora y minuto. Creamos esta cadena mediante una técnica llamada interpolaciòn de cadenas de JavaScript . Esto nos permite incrustar varios valores en la misma cadena. Finalmente, usamos el método innerHTML para mostrar este tiempo en nuestra página web.

Abramos nuestra página web en el navegador web:

AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw

Nuestra página web no puede mostrar la hora . Si miramos la consola de JavaScript, podemos ver un error:

Esta es otra representaciòn de la propiedad " no se puede establecer " innerhtml " de nulo & rdquo ;. Nos dice que el elemento en el que estamos tratando de establecer el valor de innerHTML es nulo.

La soluciòn

Debido a que el valor de show_time es nulo, podemos inferir que JavaScript no pudo recuperar con éxito el elemento cuyo ID es show_time.

En este caso, la causa es que hemos colocado nuestro & lt ; script" demasiado temprano en nuestro programa. Nuestra etiqueta "script" aparece en el encabezado de nuestra página. Esto es un problema porque sin usar una funciòn onload (), solo podemos seleccionar elementos que vienen antes de nuestro "script".

Para solucionar este error, necesitamos mover nuestro "script" debajo de nuestro párrafo:

Hemos movido nuestra etiqueta "script" debajo de la etiqueta "body". Intentemos abrir nuestra página web nuevamente:

WXdDOqcvpJPcVrh 90o B25pwG2FPG8zxu97lBVNt IcP6qWUWwhXk PPOkEeNhT72Xa9ooa0LeoLvGrKH8JbHuVCYi3N6TKMlpuFTXRoBkgMv GMRa58Lr85YOr82n8jw

La página web muestra correctamente la hora.

Si esto no resuelve el error, aseg√∫rese de seleccionar correctamente el elemento con el que desea trabajar. en su còdigo. Por ejemplo, considere esta lìnea de còdigo:

Si usáramos esta lìnea de còdigo para seleccionar nuestro elemento, verìamos el mismo error que encontramos antes. Esto es porque e no hay ning√∫n elemento cuyo ID sea " show_times & rdquo ;.

Conclusiòn

El " Error de tipo no detectado: no se puede establecer la propiedad " innerHTML " de nulo " El error se produce al intentar establecer un valor HTML interno para un elemento cuyo valor es igual a nulo. & nbsp;

Para solucionar este error, aseg√∫rese de que su còdigo "script" la etiqueta viene después del elemento que desea seleccionar en su secuencia de comandos. Si esto no resuelve el problema, verifique que esté seleccionando un elemento válido en su programa.