Fecha y hora actual: Viernes 26 May 2017 19:45
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Repartir URLS a elementos "A" Clonados -

Responder al Tema

Índice del Foro > JavaScript > Repartir URLS a elementos "A" Clonados -

Autor Mensaje
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Jueves 11 May 2017 20:50

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

///
...codepen.io/NrsctR/pen/wdmjqN
///
La idea es que los elementos clonados al hacer "click" tengan URLS diferentes, intente de varias formas y no sale, llegue hasta que todos los elementos "A" tengan la misma URL o si no, me sale Undefined ... Imagino que me debe faltar alguna funcion o metodo, ya que solo con los arrays no me alcanza x)... busque por varios foros y no encontre forma, al menos de lo que lei o vi hasta el momento. Saludos Guiño

Cualquier sugerencia por el codigo en general no viene mal Guiño, ya que de momento soy autodidacta.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo



Registrado: 07 May 2017
Mensajes: 9

Mensaje Publicado: Viernes 12 May 2017 13:14

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Esta mal el diseñó, no hay lógica en el ¿De qué forma vas a capturar elementos que todavía no están creados? Explícame eso.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Viernes 12 May 2017 16:04

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Al hacer click, se crean los elementos, a menos que funcione mal, y este mal todo el codigo en general, tuve problemas aveces, al parecer se "carga mal" (por supuesto me di cuenta despues de postearlo).
Se crean cuando haces click, se clonan(se clona ID:"boxPetal")... mi idea es que cada clonacion tenga una url diferente. Lo pude hacer pero agregando en cada ELEMENTO A esto (
elementosA[0].setAttribute("href", url[ENLACE 1]);
elementosA[1].setAttribute("href", url[ENLACE 2]);
elementosA[2].setAttribute("href", url[ENLACE 3]);.... ect....

),

pero pense que seria mejor que se repartan con un array o algo asi... la verdad el codigo no esta hecho como lo habia hecho antes (funcionando digamos :P) ( con cada enlace y cada numero de cada clonacion, con su respectiva URL )ect... si no que trataba de que tenga como un array... o alg oasi... n ose si me explico, desconozco muchas terminologias de javascript. Espero que me haya explicado bien.

Mas alla de el error de no cargar bien al hacer click (por que la animacion tendria que tener como con un delay) no hay error en la clonacion (por lo que veo), asi que lo importante es, o la consigna que quiero resolver es " si se puede llegar a repartir los enlaces a elementos clonados, por medio de un metodo o una funcion. "

(hay que hacerle como un "refresh" a codepen, para que cargue bien el codigo, no se que onda jajja... por ejemplo posicionarte sobre la parte de HTML hacer espacio y dejar que cargue de nuevo.)

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo



Registrado: 07 May 2017
Mensajes: 9

Mensaje Publicado: Viernes 12 May 2017 18:58

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

A ver como te lo explico... antes de que hagas clic no existe, porque la funcion no se ha invocado... y luego asignas, fuera de la funcion unos atributos a unos elementos que todavía no están creados. Con JQuery, puedes hacer esa locura, pero en puro js no. Para js puro debea asignar el atributo al elemento clonado o creado, dentro de la función... hoy estoy fuera y no puedo editar, pero lo que vi fue eso

Volver arriba
Ver perfil del usuario Enviar mensaje privado
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Viernes 12 May 2017 19:29

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

a!, ya entendi que me decias, no estaban jajja , lo que habia hecho antes era masomenos igual solo que estaban siempre (no solo al hacer click) ," ahora ya existen" Guiño. pero tengo la misma duda, de si se puede hacer un array en lugar de tener que poner 1 x 1... de todas formas creo que el error que me marcaste, era el error que no me dejaba hacer el array, ahora voy a ver si me sale algo.

Ahi lo modifique.

... codepen.io/NrsctR/pen/wdmjqN


-------------------------


ahi ya lo pude hacer, creo que esta bien... gracias Guiño

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo



Registrado: 07 May 2017
Mensajes: 9

Mensaje Publicado: Sábado 13 May 2017 18:13

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Código:
  1.  
  2. var enlaces= [
  3. "1.com",
  4. "2.com",
  5. "3.com",
  6. "4.com",
  7. "5.com",
  8. "6.com",
  9. "7.com",
  10. "8.com",
  11. "9.com",
  12. "10.com",
  13. "11.com",
  14. "12.com"];
  15.  
  16. // petalos -----
  17. var petal = document.getElementById('boxPetal');
  18. var contentPetals = document.getElementsByClassName('contentPetals');
  19. var petalclass = document.getElementsByClassName('boxPetal');
  20.  
  21. document.getElementById('button').addEventListener("click", function(){
  22. if (petalclass.length == "1") {
  23. var grados=0;
  24. for (let i = 0; i < 11; i++) {
  25. var newElement = petal.cloneNode(true);
  26. newElement.getElementsByClassName("elementosA")[0].setAttribute("href", enlaces[i])
  27. newElement.style.transform = "rotate(" + grados + "deg)";
  28. grados+=33.0;
  29. document.getElementById('contentPetals').appendChild(newElement);
  30. console.log(i+" petalo creado");
  31. }
  32. }
  33. });



El código es horrible, entiendo que es porque no tienes practica en la programación.
¿Por qué rotar pétalo por pétalo cuando puedes rotar el marco donde tienes los pétalos?

PD Te recomiendo que cuando hagas algo, vayas paso por paso, no intentes implementar todo de golpe. Cuando veas que funciona una parte del programa, añade la siguiente, no metas todo ahí a ver que sale o esperando que en un foro alguien te lo corrija, así nunca aprenderás.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Domingo 14 May 2017 18:30

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Gracias igual no esperaba que me lo corrijas, si no que queria sacarme esa duda de repartir URLS, cosa que lo pude resolver, obvio con tu ayuda, el simple error que no podia ver que era que no estaba dentro la funcion, lo pude resolver, quizas no de la mejor forma, en programacion creo que hay muchas formas de hacer la misma cosa, con el tiempo creo que se van aprendiendo detalles que solucionan mas rapido un problema o la idea que uno quiere hacer, realmente estoy experimentando que hace cada cosa, tengo menos de un mes en esto, dos meses como mucho.

De todas formas gracias por tomarte el tiempo de correjirme todo el codigo, hay muchas cosas que dezconosco y mirando como lo haces puedo ir viendo masomenos.

Hay muchas formas de aprender a mi me parecer, y si no me equivoco es un foro para sacarse dudas, quizas no tan interesantes como otros post, pero a mi me sirve, y tal vez a gente que esta empezando tambien, si existe alguna norma de no postear codigos "simples", pido disculpas, y se crees que cada error que tengo lo voy a postear estas equivocado, siempre busco por todos lados, leo las propiedades de cada funcion, intento entenderla, veo videos busco en otros foros, trato de improvisar,(con cosas totalmente descaradas, tal vez jajja) pero intento obtener lo que quiero, despues de ahi, a que este bien se vera despues, ya que como dije, trato de ver, experimentar, ... que hace cada metodo, funcion... ect...

de todas formas te agradezco de nuevo Guiño

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo



Registrado: 07 May 2017
Mensajes: 9

Mensaje Publicado: Lunes 15 May 2017 18:02

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Logicamente Pablo con un desorden tremendo como el que tienes en el código muchas cosas pueden pasar desapercibidas. La indentación o tabulación al comienzo de la líena aunque sea prescindible es necesaria, porque te hace más fácil ver la jerarquía, los ámbitos, y por lo tanto mejora la legibilidad.

Sobre lo que comentas de que hay muchas formas de enfocar el código tienes razón, pero básicamente se puede dividir en dos formas, "eficiencia"(en diferentes niveles) y que funcione(no se plantea mantenimiento, ni el rendimiento, solo que cumpla una tarea sin rebuscar en eficiencia). Actualmente la eficiencia no se le da la importancia debida hasta que tienes un monstruo de más de diez mil líneas de código. La eficiencia reduce el código, reduce el consumo de recursos, es más legible, tiene más ventajas en resumen... de todas formas para ser algo improvisado está bien y funciona, que es lo que te interesa, cierto? Seguro que con la práctica dominarás la eficiencia de forma inconsciente.

Código:
  1. var enlaces= [
  2. "1.com",
  3. "2.com",
  4. "3.com",
  5. "4.com",
  6. "5.com",
  7. "6.com",
  8. "7.com",
  9. "8.com",
  10. "9.com",
  11. "10.com",
  12. "11.com",
  13. "12.com"];
  14.  
  15. // petalos -----
  16. var capullo = document.getElementById('boxPetal'), lapso;
  17.  
  18. document.getElementById('button').addEventListener("click", function(){
  19. if (lapso == undefined) { // solo se ejcuta una vez
  20. var grados=0, i=0, retrasoEnMilisegundos = 100;
  21. lapso=setInterval(function(){
  22. if (i++<11) {
  23.  
  24. let petalo = capullo.cloneNode(true);
  25. petalo.getElementsByClassName("elementosA")[0].setAttribute("href", enlaces[i])
  26. document.getElementById('contentPetals').appendChild(petalo);
  27.  
  28. capullo.style.transform = "rotate(" + grados + "deg)";
  29. capullo.style.transitionDuration = retrasoEnMilisegundos+"ms";
  30. grados+=33.0;
  31.  
  32. } else clearInterval(lapso);
  33. },retrasoEnMilisegundos);
  34. }
  35. });


codepen.io/WhiteSkull/pen/oWyMEr

Volver arriba
Ver perfil del usuario Enviar mensaje privado
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Lunes 15 May 2017 19:29

Título del mensaje: Repartir URLS a elementos "A" Clonados -

Responder citando

Gracias pedrolo! Lo voy a tener en cuenta! te doy toda la razon! yo escribo desde mi humilde conocimiento no mas!...
Es mi forma de aprender, tengo que escribir codigo y ver que hace, imagino que con el tiempo me voy a dar cuenta de muchas cosas, es cuestion de sentarse y tratar de entender el entorno en donde se codea. Fumao

Saludos! Ok
---------------------------------
"i" es igual a "-2" ... no 0, si no empieza desde el "3.com"... (aunque no, no es -2, hay un problema, voy a ver si lo soluciono, ya no quiero ser rompe bolas, saludos!)

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 1 Hora

Temas relacionados

Tema Autor Foros Respuestas Publicado
El tema está bloqueado: no pueden editarse ni agregar mensajes.

Busco programador en Android para APP de "...

JoseAngel Bolsa de trabajo 2 Viernes 21 Oct 2016 17:55 Ver último mensaje
El foro no contiene ningún mensaje nuevo

exportar dos grib a un txt "ya exporto un...

EVILMEN164 Visual Basic .NET 0 Jueves 09 Jun 2016 17:41 Ver último mensaje
El foro no contiene ningún mensaje nuevo

urls amigables htaccess

sirkiu PHP 6 Jueves 10 Dic 2015 18:51 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Obtener "longitud" y "latitud&qu...

OchoaPHP JavaScript 1 Viernes 16 Ene 2015 04:02 Ver último mensaje
El foro no contiene ningún mensaje nuevo

printf("%s", "Hola gente");

zikut0 Preséntate a la comunidad 2 Viernes 28 Nov 2014 19:21 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,