Comunidad de diseño web y desarrollo en internet online

Ayuda con ejercicio de eventos+DOM

Citar            
MensajeEscrito el 26 Nov 2014 09:58 am
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 privado si lo preferís o escribirme un posible código por aquí para tener alguna idea clara.

Gracias de antemano.

Por ucip3

5 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 26 Nov 2014 03:20 pm
Me gusto tu ejercicio manos a la obra.. dame unos minutos por que estoy en mi trabajo y no debo de hacer cosas fuera de el.. pero esto se me hace divertido :D

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 26 Nov 2014 04:25 pm

elporfirio escribió:

Me gusto tu ejercicio manos a la obra.. dame unos minutos por que estoy en mi trabajo y no debo de hacer cosas fuera de el.. pero esto se me hace divertido :D


Te lo agradezco de verdad, espero tu respuesta, estoy aprendiendo y se me hace duro.

Por ucip3

5 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 26 Nov 2014 06:40 pm
El código que tenía hasta ahora sólo para añadir a la lista.

<!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>Nombre: "+nombre+", e-Mail: <i>"+correo+"</i>, teléfono: ("+telefono+")</li>";
lista.innerHTML += nuevoElemento;
}

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>

Por ucip3

5 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 26 Nov 2014 06:56 pm
Aqui una aproximación de lo que vas a tener que hacer.

http://jsfiddle.net/elporfirio/et3pdz29/

En este punto te recomiendo leer información de:

-- funciones y parametros.
-- Variables locales y globales.
-- eventos y manejadores
-- Objetos JSON (importantisimo)
-- funcion .on() de Jquery

Suerte amigo, si tienes preguntas tienen que ser "muy especificas", no vayas a preguntar "que hace esta funcion? "

o para que sirve el metodo .append(), todo eso viene en la documentacion y vas a tener que buscarlo por tu cuenta para entender la funcion.

Saludos.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 26 Nov 2014 07:06 pm

elporfirio escribió:

Aqui una aproximación de lo que vas a tener que hacer.

http://jsfiddle.net/elporfirio/et3pdz29/

En este punto te recomiendo leer información de:

-- funciones y parametros.
-- Variables locales y globales.
-- eventos y manejadores
-- Objetos JSON (importantisimo)
-- funcion .on() de Jquery

Suerte amigo, si tienes preguntas tienen que ser "muy especificas", no vayas a preguntar "que hace esta funcion? "

o para que sirve el metodo .append(), todo eso viene en la documentacion y vas a tener que buscarlo por tu cuenta para entender la funcion.

Saludos.


Mil gracias, mañana mismo en clase le echaré un vistazo.

Por ucip3

5 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.