Hacer una lista de la compra a partir de un campo de texto de un formulario es un ejercicio típico en todo curso de javascript.
El ejercicio que se presenta es la continuación pero en este caso resuelto con jQuery.
Hay algunos conceptos clave que te pueden ser útiles.
- Identificar el value de un campo <input>con jQ
- Crear, modificar y eliminar nodos con jQ
- Instrucciones html() y css()
- Concepto de this
- Asignar varios eventos a un mismo nodo.
Vamos a repasarlo mediante un ejercicio.
Enunciado
A partir del documento html que se te presenta escribe un script que permite capturar las informaciones que un usuario escriba en el<input>
y las escriba en el elemento <ol id="listaCompra"></ol>
cuando el usuario pulse el botón añadir.
Los elementos lista deben tener el siguiente comportamiento:
- Cuando se haga clic sobre un elemento lista creado este debe tacharse y ponerse en cursiva.
- Cuando se haga doble clic sobre un elemento este se debe borrar.
Cuando se pulse el botón resetear la lista sea pulsado se deben borrar todos los elementos<li>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio acoplamiento Javascript">
<meta name="author" content="Francesc Ricart">
<title>Ejemplo de acoplamiento javascript</title>
<script>
window.alert("te saludo");
</script>
</head>
<body>
<p>En este ejercicio queremos que los scripts lean el código en hojas separadas</p>
<script>
window.alert("te saludo otra vez por si no te has percatado");
</script>
</body>
</html>
Solución del ejercicio
El problema se puede resolver dividiéndolo en otros 3 más sencillos.
En primer lugar capturamos el campo escrito por el visitante web y después creamos un nodo que injertamos en la lista ordenada.
Una vez resuelto el problema anterior se trata de hacer que una vez pulsado el botón añadir el <input> quede de nuevo vacío preparado para volver a escribir otro elemento.
En el tercer caso asignamos a cada elemento <li> dos eventos: el click y el doble click.
$(document).ready(function(){
$("#anadirCompra").click(function(){
//capturamos el campo input y creamos un nodo y lo injertamos
var nuevoTexto = $("#compra").val();
var nuevoLi = document.createElement("li");
$(nuevoLi).html(nuevoTexto);
$("#listaCompra").append(nuevoLi);
//reseteamos el campo input
$("#compra").val("");
//asiganmos eventos al nodo creado
$(nuevoLi).on({
click:function(){
$(this).css({
"text-decoration":"line-through",
"font-style":"italic"
})
},
dblclick: function(){
$(this).remove();
}
})
})
$("#reset").click(function(){
$("li").remove()
})
})
¡Hola!
Querido lector,
La solución presentada no incluye el caso que se añada un elemento cuando el campo <input> está vacío. ¿Como harías para que no se añadan elemento <li> cuando esto sucede?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta