Ejercicio JS – Rellenar contenidos usando el DOM

Ejercicio JS – Rellenar contenidos usando el DOM

Print Friendly, PDF & Email
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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? 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.