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 ejericio 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 por correo electrónico si lo preferís o escribirme un posible código por aquí para tener alguna idea clara.
Gracias de antemano.
