Ejercicio JS – Rellenar contenidos usando el DOM

Ejercicio JS – Rellenar contenidos usando el DOM

Print Friendly, PDF & Email
Ejercicio JS – Rellenar contenidos usando el DOM
Valora esta entrada
Este es un ejercicio de iniciación al DOM.

Será necesario repasar varios conceptos

  • Como llamar nodos del DOM usando document.getElementById() y document.querySelector() o document.querySelectorAll()
  • Como llamar al contenido de texto almacenado en un campo de un formulario web.
  • Como introducir contenido HTML dentro de una etiqueta ya existente en el documento sin borrar el contenido del documento. (Traducido: evitar el uso de document.write())

Las lecturas enlazadas en la lista anterior te pueden resultar de interés para repasar.

Enunciado

Dado el código HTML a continuación termina de rellenarlo para tras rellenar los campos de nombre y apellido y hacer clic en enviar datos aparezca por pantalla el texto “hola nombre apellidos, gracias por rellenar el formulario”.

Ver imagen adjunta.

enunciado ejercicio innerHTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Llamar y rellenar cajetines de texto">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio javascript - Instrucciones básicas DOM</title>
    </head>
    <body>
    
    <form action="#saludo">
        <label for="nombre">Nombre:</label><input type="text" id="nombre">
        <label for="apellido">Apellido:</label><input type="text" id="apellido">
        <input type="submit" value="Rellenar datos" onclick="enviarSaludo()">     
    </form>
    
    <p id="saludo"></p>
    
    <script>
    
        function enviarSaludo(){
        }
    </script>

    </body>
</html>
Ver solución (Haz clic)

Solución del ejercicio

El ejercicio consiste en rellenar el código que falta dentro de la función enviarSaludo().

Se declaran 4 variables para capturar los 2 nodos input, el nodo párrafo y para almacenar el contenido que queremos introducir dentro del nodo párrafo.

A título demostrativo para llamar los nodos y almacenarlos se han usado getElementById() y querySelector().

Estas instrucciones devuelven un único nodo. Por tanto cuando queremos acceder a ellos estamos accediendo directamente al nodo a diferencia de lo que pasa con getElementsByTagName() o querySelectorAll().

A continuación construimos el texto llamando al contenido que contienen los nodos input. Este contenido es accesible mediante el atributo value de toda etiqueta input.

Introducimos el texto mediante innerHTML = texto.

IMPORTANTE:

Un factor importante es que puesto el botón de envío del formulario nos envía a una página nueva salvo que indiquemos expresamente lo contrario. Es importante la línea <form action=#saludo> pues estamos enviando al usuario a la ancla saludo.

De lo contario nunca veréis que el script rellene nada porqué en realidad estaréis recargando la página cada vez al clicar en submit.

¿Como queda el documento html?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Llamar y rellenar cajetines de texto">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio javascript - Instrucciones básicas DOM</title>
    </head>
    <body>
    
    <form action="#saludo">
        <label for="nombre">Nombre:</label><input type="text" id="nombre">
        <label for="apellido">Apellido:</label><input type="text" id="apellido">
        <input type="submit" value="Rellenar datos" onclick="enviarSaludo()">     
    </form>
    
    <p id="saludo"></p>
    
    <script>
    
        function enviarSaludo(){
            var nombre = document.getElementById("nombre");
            var apellido = document.getElementById("apellido");
            var saludo = document.querySelector("#saludo");
            var texto = "hola " + nombre.value + " "+ apellido.value +", gracias por rellenar el formulario";
            
            saludo.innerHTML= texto;
        }
    </script>

    </body>
</html>

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Tipos de variables en Javascript
- 933
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
Resumen de carácteres extraños en Javascript
- 244
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Introducción a la lógica de programación: if y for
- 653
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
El Document object model (DOM) de Javascript
- 324
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Ejercicio – Escribir un texto almacenado en una variable
- 107
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio JS – Formulario con un campo oculto
- 56
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
Crear, modificar, eliminar y detectar cookies con Javascript
- 992
En esta entrada explicamos los tipos de cookies que existen y mostramos una biblioteca de funciones que nos permite crear, modificar, eliminar y detectar cookies con javscript.
La apasionante historia del Javascript (resumida)
- 488
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 154
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Función que crea un objeto y lo almacena en una lista en Javascript
- 478
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.