01 Ene Como hacer una lista de la compra con Javascript
El ejercicio de hoy es un clásico en cualquier tutorial de JS o de jQuery.
Esta es sin embargo una versión exclusivamente con Javascript y un paso intermedio para versiones más complicadas.
Practicaremos los siguientes conceptos clave:
- Creación de nodos mediante javascript.
- Practicaremos con addEventListener.
- Validaremos datos y usaremos preventDefault() para evitar el envío de datos.
- Eliminación de nodos de un documento web.
- Concepto de la instrucción this.
En un ejercicio anterior hicimos un ejercicio parecido. Este es el enlace.
¡Vayamos al ejercicio!
Enunciado
Dado el html a continuación crea una lista de recordatorios según la imagen que:
- Creada una lista añada cualquier información escrita en el cajetín de texto cuando se pulse el botón enviar.
- En caso que el cajetín esté vacío no se añadirá nada a la lista.
- Para eliminar elementos lista se hará con un doble click.
- El javascript se añadirá al cargar el documento. Intenta que el código html esté lo más limpio posible.
- El color del fondo es #ccc.
<div id="container">
<form action="#">
<label for="anadir">Mi lista de la compra:</label>
<input type="text" name="anadir" id="anadir">
<input type="button" value="Añadir a la lista">
</form>
<ul id="listaCompra"></ul>
<p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
</div>Solución del ejercicio
En la solución presentada hay 3 funciones básicas.
- La función onload para asignar eventos al cargar el documento y declarar variables que se usarán en el resto del código.
- La función anadir para validar el envío de datos y añadirlos a la lista.
- La función eliminarLi para eliminar elementos lista al hacer doble click.
En el código no se incluye el CSS pues no es relevante para la resolución (pero se añade con el archivo descargable).
Función onload
window.onload = init;
function init(){
botonEnvio = document.querySelector('[type="button"]');
nuevoItem = document.querySelector('[type="text"]');
listaCompra = document.getElementById("listaCompra");
botonEnvio.addEventListener("click",anadir);
}Cuando se termina de cargar la página llamamos la función init mediante el evento onload. Fijaros que no lleva paréntesis porqué no nos interesa su ejecución en el momento de lectura del javascript sino cuando suceda el evento onload.
Fijaros que las variables botonEnvio, nuevoItem y listaCompra no llevan la palabra var para que sean de ámbito global.
Usamos querySelector a modo didáctico.
Función anadir
function anadir(e){
evento = e || window.event;
if (nuevoItem.value == ""){
evento.preventDefault();
}else{
var lista = document.createElement("li");
lista.innerHTML = nuevoItem.value;
lista.addEventListener("dblclick",eliminarLi);
listaCompra.appendChild(lista);
nuevoItem.value = "";
}
}Para entender bien la función anadir recomiendo esta lectura.
Si el cajetín de texto está vacío el botón de enviar información para ser añadida a la lista no se ejecuta gracias a preventDefault().
En caso de que si se deba añadir elementos primero creamos el nodo y luego lo añadimos. Fijaros en la inclusión de la instrucción addEventListener() para todos los elementos <li>.
Función eliminarLi
function eliminarLi(){
this.parentNode.removeChild(this);
}Un nodo no se puede autodestruir.
Debemos llamar al elemento padre y desde este eliminar al hijo.
El hijo es siempre la palabra this.
Si juntamos todas las piezas resolvemos el ejercicio.
¡Hola!
Querido lector,
Este ha sido un completo ejercicio dónde se repasan muchísimos conceptos. Espero te haya sido de utilidad.
Puedes descargar la solución completa en este enlace.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
¿Estás cansado de buscar como solucionar el error concreto de tu script? La consola del navegador es tu ayuda. ¡Deja de buscar!
Ejercicio pensada para personas que empiezan a aprender javascript. Dibuja una escalera con javascript y css. Incluye solución.
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
En ocasiones es en las cosas más básicas dónde nos bloqueamos. ¿Qué nombre poner a las variables cuando programamos con javascript?
cesar augusto caicedo muñoz
Posted at 02:14h, 25 marzoHola profe en el ejercicio COMO HACER UNA LISTA DE LA COMPRA CON JAVASCRIPT es excelente y lo estoy integrando a mi pagina web pero hay dos puntos que me gustaria que me indicara para añadirlo al ejercicio serian
1. hacer flotante el cuadro donde ingreso la lista de compras
2. y un botton donde me permita enviar la lista de compra a un enlace. ejemplo un chat de whatsapp.
adjunto el código del ejercicio si conoce la solución de mi petición favor indicarme los códigos y el lugar donde se ingresan para que funcionen le agradezco
Lista de la compra
*{box-sizing:border-box;padding:0;margin:0;}
#container{
width:600px;
padding:2%;
border:1px solid #000;
border-radius:10px;
background-color:#f0f0f0;
margin:auto;
}
#container p{
font-style:italic;
margin:20px auto;
}
label{
display:block;
font-weight:bold;
}
input{
display:inline-block;
width:49%;
margin:20px auto;
}
Mi lista de la compra:
Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos
window.onload = init;
function init(){
botonEnvio = document.querySelector(‘[type=»button»]’);
nuevoItem = document.querySelector(‘[type=»text»]’);
listaCompra = document.getElementById(«listaCompra»);
botonEnvio.addEventListener(«click»,anadir);
}
function anadir(e){
evento = e || window.event;
if (nuevoItem.value == «»){
evento.preventDefault();
}else{
var lista = document.createElement(«li»);
lista.innerHTML = nuevoItem.value;
lista.addEventListener(«dblclick»,eliminarLi);
listaCompra.appendChild(lista);
nuevoItem.value = «»;
}
}
function eliminarLi(){
this.parentNode.removeChild(this);
}