Como hacer una lista de la compra con Javascript

Como hacer una lista de la compra con Javascript

Print Friendly, PDF & Email
Como hacer una lista de la compra con Javascript
Valora esta entrada

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:

En un ejercicio anterior hicimos un ejercicio parecido. Este es el enlace.

¡Vayamos al ejercicio!

Lista de la compra mediante Javascript
Lista de la compra mediante Javascript

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.

  1. La función onload para asignar eventos al cargar el documento y declarar variables que se usarán en el resto del código.
  2. La función anadir para validar el envío de datos y añadirlos a la lista.
  3. 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:

Sustituir un nodo por otro en el DOM mediante Javascript
- 360
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 241
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 214
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
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...
La etiqueta noscript
- 515
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Ejercicio – Generación de una fecha personalizada mediante javascript
- 167
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 251
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
Ejercicio JS – Formulario con un campo oculto
- 158
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
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.
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.