JavaScript - Ayuda con ejercicio eventos+DOM

Ayuda con ejercicio eventos+DOM

Publicado por Isaac (5 intervenciones) el 26/11/2014 09:40:09

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.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Ayuda con ejercicio eventos+DOM

Publicado por xve (2100 intervenciones) el 26/11/2014 18:50:49

Hola Isaac, nos puedes mostrar tu código... sobre el mismo, intentare hacerte la modificación...

Entiendo que tienes que poner el texto con un estilo oculto, y que cuando se pulse el nombre, se cambie dicho estilo para uno que no sea oculto...

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Ayuda con ejercicio eventos+DOM

Publicado por Isaac (5 intervenciones) el 26/11/2014 19:34:05

Adjunto el archivo con el código. Gracias

Ejercicio_eventoDOM.rar(873,0 B)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Ayuda con ejercicio eventos+DOM

Publicado por xve (2100 intervenciones) el 26/11/2014 22:07:42

Hola Isaac, aqui lo tienes.... te marco en negrita los cambios que he realizado...

<!DOCTYPE html>

<html>

   <meta charset="UTF-8">

   <title>Ejercicio 4.4</title>

   <style type="text/css">

      body { font-family: Arial, sans-serif; }

      form { border: 2px solid #008040; margin: 0 auto; padding: 0 0 10px 10px; width: 700px; }

      h2 { color: #008040; }

      div.item { overflow: hidden; margin-bottom: 10px; }

      label { font-weight: bold; float: left; margin-right: 10px; width: 75px; }

      div#datos { margin: 0 auto; padding: 10px; width: 700px; }

      .oculto { display: none; }

      .visible { display: inline; }

   </style>

   <script type="text/javascript">

		function annadir()

			var nombre = document.getElementById("nombre").value;

			var correo = document.getElementById("correo").value;

			var telefono = document.getElementById("telefono").value;

			var lista = document.getElementById("lista");

			var nuevoElemento = "<li><span onclick='mostrar(this)'>Nombre: "+nombre+"<span class='oculto'>, e-Mail: <i>"+correo+"</i>, teléfono: ("+telefono+")</span></span></li>";

			lista.innerHTML += nuevoElemento;

		function mostrar(e)

			e.getElementsByTagName("span")[0].style.display="inline";

		function init()

			var b = document.getElementById("boton");

			b.addEventListener("click", annadir);

   </script>

</head>

<body onload="init()">

   <form id="formulario">

      <h2>Rellena los campos</h2>

      <div class="item">

         <label for="nombre">Nombre</label>

         <input type="text" id="nombre" autofocus required/>

      </div>

      <div class="item">

         <label for="correo">e-Mail</label>

         <input type="email" id="correo" required/>

      </div>

      <div class="item">

         <label for="telefono">Teléfono</label>

         <input type="telf" id="telefono" required/>

      </div>

      <input type="button" id="boton" value="Enviar"/>

   </form>

   <div id="datos">

      <ul id="lista"></ul>

   </div>

</body>

</html>

Cuando se pulsa sobre el nombre, enviamos el objeto a la función mostrar(), y desde ahí, seleccionamos el primer elemento <span>, el cual mostramos.

Coméntanos si te sirve, ok?

Valora esta respuesta

Comentar

Ayuda con ejercicio eventos+DOM

Publicado por Isaac (5 intervenciones) el 27/11/2014 07:14:25

Justo intenté hacer algo parecido, pero no se me ocurría como llamar al 'span' y claro no me acordé del getElementsByTagName.

Lo que a mi profesor no le gustó, que yo también hice y se lo mostré, fue asignar el evento 'onclick' y la función directamente a la hora de asignarle al 'ul' el innerHTML.
Imagino que si hago un createElement ("span") y luego sobre esa variable hago un setAtributte("onclick") , etc le gustará más, quiere que esa lógica esté así separada y no todo a pelo en la misma línea.

Aun así la idea que me has mostrado es parecida a la que yo tenía en mente y te lo agradezco un montón por aclararme un poco más los conceptos.

Valora esta respuesta

Comentar

recuperar parametro pasado por GET

linking pdf