En clase nos han mandado realizar un ejercicio usando eventos para modificar el DOM.
Trata de hacer un formulario para recoger los datos de nombre, e-mail y teléfono de una persona y a medida que se pinche en "enviar" justo debajo del formulario aparezcan sus datos en una línea creando una lista.
Hasta ahí todo fácil, tengo creado una etiqueta ul con un atributo id="lista". El botón de formulario tiene un evento onclick que ejecuta una función en donde creo un nuevo elemento li y le añado a su contenido el nombre, e-mail y teléfono y este li al ul.
La complicación me surge cuando se nos ha pedido modificar el ejercicio y que ahora, al enviar el formulario, solo aparezca en el elemento li el nombre y que al pinchar sobre ese elemento, o sobre el nombre, se visualice su e-mail y su teléfono justo al lado en la misma línea. Si fuera solo un contacto estaría bien, pero en la lista puede haber varios contactos y si pinchas sobre el nombre de alguno de ellos solo quieres que aparezca su e-mail y su teléfono no el de los demás, y por su puesto que desaparezca si vuelves a pinchar. No se cómo asignarles id de diferentes nombres a cada uno y cómo saber a cuál han pinchado para mostrar solo ese, algo tiene que ver this en todo esto pero no consigo dar con la solución.
No se si me he explicado bien. Podéis contactar conmigo o escribirme un posible código por aquí para tener alguna idea clara.
Gracias de antemano.
Respuestas
Como dices que es algo para clase, no te vamos a pasar directamente el código de la solución porque si no, no aprenderías. Pero sí que podemos echarte una mano para que aprendas más rápido. La pregunta sería: ¿qué estrategia has pensado para asignar id a los elementos? ¿Números aleatorios, números secuenciales, nada porque no hace falta asignar un id a cada nodo?
Y cuando defines un evento sobre un elemento y pinchas sobre él, ¿a qué elemento se refiere this dentro de la función que responde al evento? Acuérdate que en los navegadores modernos tienes un montón de herramientas JavaScript avanzadas donde puedes ejecutar el código paso a paso y puedes ver el contenido de cada variable. Te recomiendo que mires el contenido de this antes y después de pinchar en algún elemento.
@javiereguiluz
A lo mejor si creo un objeto 'contacto' con sus propiedades 'nombre', 'e-mail', 'teléfono' y los voy añadiendo a un array y les incluyo una propiedad código o id de números secuenciales utilizando el largo del array según se vaya creando y crear junto con el 'li' un 'id' con el código del contacto y un evento 'onclick' que cuando lo pinche busque ese 'id' dentro del array y cuando encuentre el contacto modifique el innerHTML de ese 'li' y muestre todos los valores.
Pero ya me hago un lío de cómo plantear las funciones...
@ucip3