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:

Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 215
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio – Diferencia entre ++x y x++ en Javascript
- 174
En esta publicación se repasa mediante ejercicios la diferencia entre escribir ++x y x++ o --x y x--. Es cuestión de pillarle el tranquillo.
Instrucción “this” de Javascript explicada paso a paso
- 359
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Sintaxi y gramática básica de las variables en javascript
- 385
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 571
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como contar vocales y espacios en blanco en un texto mediante javascript
- 314
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
Validación de campos try catch finally en Javascript puro
- 617
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Como añadir nuevos nodos al DOM usando Javascript
- 776
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Métodos javascript
- 637
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
- 494
Ejercicio práctico con solución sobre como crear un menú vertical con submenú vertical desplegable en javascript sin jquery. Incluye solución.
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.