07 Nov Ejercicio JS – Rellenar contenidos usando el DOM
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.
<!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>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!
No Comments