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:

Como eliminar nodos del DOM mediante Javascript
- 392
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Como llamar nodos del DOM mediante javascript
- 313
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Como modificar el destino de todos los enlaces de una web con javascript
- 43
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Introducción a la lógica de programación: if y for
- 443
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...
Ejercicio – corrección de errores en javascript. Variables y strings.
- 58
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Introducción a los eventos javascript
- 257
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
Tipos de variables en Javascript
- 548
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...
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 54
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Estructura condicional switch en Javascript
- 460
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
Funciones Javascript: declaración, uso y utilidad en programación
- 404
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
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.