Documento Javascript Getelementbyid

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

El método getElementById de JavaScript selecciona un elemento del Document Object Model (DOM) de HTML. Si escribe incorrectamente este método, encontrará el error document.getElementByID no es una funciòn en su programa.

Este tutorial explica qué significa este error y por qué se levanta. Veremos un ejemplo de este error para que pueda aprender lo que necesita saber para solucionarlo.

document.getElementByID no es una funciòn

El documento. El método getElementById () es uno de los métodos de selecciòn de JavaScript. El método recupera un objeto en funciòn de su ID del DOM HTML.

Este método se utiliza para manipular el contenido de un elemento o recuperar informaciòn sobre un elemento en particular, como su contenido o sus atributos. .

Los ID se definen en HTML. Un ID debe ser √∫nico para un elemento en particular:

"header id = " top_header "" "/ header"

La etiqueta "header" tiene el ID top_header. Este ID es exclusivo de la etiqueta "header". Los ID se utilizan a menudo para aplicar estilos a elementos particulares mediante CSS .

documento. getElementById () distingue entre may√∫sculas y min√∫sculas. Este método no es:

  • documento. getelementbyid ()
  • document.getElementByID ()
  • document.GetElementById ()

Cualquier otra variaciòn en el nombre del método no será aceptada por JavaScript.

Si bien es tentador escribir ID en may√∫sculas porque es una abreviatura de otra palabra, el método requiere que uses una I may√∫scula y una d .

Para obtener más informaciòn sobre el método getElementById, lea nuestra guìa sobre JavaScript getElementById .

Un escenario de ejemplo

Vamos a crear un fragmento de còdigo que le da la bienvenida a un usuario a nuestra aplicaciòn. El mensaje de bienvenida estará en un tìtulo que aparece en la parte superior de nuestra página.

Para los propòsitos de este ejemplo, usaremos un nombre de demostraciòn.

Para comenzar, defina el còdigo HTML de nuestro cuerpo para la secciòn de bienvenida de la página web:

De forma predeterminada, nuestra etiqueta "h1" contendrá el contenido Welcome. La etiqueta "header" es la etiqueta principal en la que se encuentra nuestro tìtulo. & nbsp; A continuaciòn, agregaremos una etiqueta "script" debajo de "encabezado" etiqueta . La etiqueta de secuencia de comandos contendrá todo el còdigo JavaScript para nuestro mensaje de bienvenida:

Dentro de nuestra secuencia de comandos, vamos a seleccionar nuestro tìtulo y cambiar su contenido: < br>

El método getElementById () selecciona nuestro tìtulo. Asignamos este elemento HTML a la variable JavaScript llamada title. El contenido de nuestro tìtulo se cambiará para mostrar " ¬°Bienvenido, Luke! & Rdquo; Usamos el método textContent para cambiar el tìtulo. & Nbsp;

Ejecutemos nuestro còdigo y veamos qué sucede. Si abrimos nuestra consola JavaScript , podemos ver un error:

Captura de pantalla 2020 09 28 a las 07.47.35

Nuestro còdigo no es funcional ioning correctamente. Nuestro tìtulo no ha sido cambiado:

Captura de pantalla 2020 09 28 a las 07.47.24

La soluciòn

Hemos utilizado el caso incorrecto para el document.getElementByID selector. En lugar de utilizar una I may√∫scula y una d min√∫scula, hemos utilizado una I y una D may√∫sculas.

JavaScript no registra nuestro programa como una llamada a la funciòn getElementById porque el nombre de la funciòn distingue entre may√∫sculas y min√∫sculas.

Necesitamos cambiar nuestro còdigo para que usemos los casos correctos para nuestra funciòn:

Ahora estamos usando Id en lugar de ID en nuestra llamada de funciòn. Ejecutemos nuestro nuevo còdigo:

Captura de pantalla 2020 09 28 a las 07.48. 43

Nuestro programa cambia con éxito el contenido de nuestro tìtulo a incluir el nombre de nuestro usuario.

Conclusiòn

El método document.getElementById () selecciona un elemento de la página web. Este método te permite ver y cambiar el contenido de un elemento.
Cuando uses este método, debes asegurarte de usar los casos correctos. La identificaciòn no está en letras may√∫sculas. Debes usar una I may√∫scula y una d min√∫scula para que el método funcione.