Funcion onclick dentro de bucle for

[rodricrzz]

Hola, estoy creando unos botones dinamicamente a traves de un for de la siguiente manera:

Código:

for (var i=0; i<vecpeliculas.length; i++){
			eval("var boxButton" + i + "= document.createElement('a')");
			eval("boxButton" + i + ".innerHTML = 'AGREGAR'");
}

De modo que se crean los elementos: boxButton1; boxButton2; boxButton3; boxButton4; etc...

Ahora lo que quiero hacer es asignarle un onclick a cada elemento creado, dinamicamente, algo como esto:

Código:

for (var i=0; i<vecpeliculas.length; i++){
	boxButton[i].onclick = function(){
		alert("mensaje" + i);
	}
}

Pero se que no se puede poner el indice de esa manera, y no se como hacerlo.

Vale aclarar que ese alert no tiene mucho sentido jajaja pero lo hice de ejemplo, lo puse bien basico para que se entienda lo que necesito.

Espero que puedan ayudarme, muchas gracias desde ya!
Saludos!

[ggomez91]

Hola, te estas metiendo con closures, para entender bien que pasa pásate por aca: http://tobyho.com/2011/11/02/callbacks-in-loops/

Básicamente necesitas una función extra para que bindee el evento con el boton:

Código Javascript:

for (var i=0; i<vecpeliculas.length; i++){
    bind(boxButton[i], i);
}
 
function bind(boton, i){
    boton.onclick = function(){
        alert("mensaje" + i);
    }
}
 

[rodricrzz]

Iniciado por ggomez91

Hola, te estas metiendo con closures, para entender bien que pasa pásate por aca: http://tobyho.com/2011/11/02/callbacks-in-loops/

Básicamente necesitas una función extra para que bindee el evento con el boton:

Código Javascript:

for (var i=0; i<vecpeliculas.length; i++){
    bind(boxButton[i], i);
}
 
function bind(boton, i){
    boton.onclick = function(){
        alert("mensaje" + i);
    }
}
 

Gracias por contestar!!
Vos decis que colocando el bucle y luego la funcion debe funcionar? porque no lo hace..

Quizas esté haciendo algo mal, te paso lo que hice (lo recorté un poco quitando algun codigo innecesario que no tiene relevancia)

Código:

var vecpeliculas = []; 
vecpeliculas[0] = peliculas={titulo:"Avatar",categoria:"Aventura",foto:"avatar.jpg", descripcion: "Descripcion Avatar", formato: "bluray", precio: "199", cantidad: ""};
vecpeliculas[1] = peliculas={titulo:"IronMan 2",categoria:"Comedia",foto:"ironman2.jpg", descripcion: "Descripcion IronMan 2", formato: "bluray", precio: "299", cantidad: ""};

for(var i=0; i<vecpeliculas.length; i++){
			eval("var boxButton" + i + "= document.createElement('a')");
			eval("boxButton" + i + ".innerHTML = 'AGREGAR'");
			eval("boxButton" + i + ".className = 'box-button'");
}

function comedia(){
	// Aca pongo los appendChild correspondientes para que los muestre y esta funcion se ejecuta al hacer un click en un enlace
}

for (var i=0; i<vecpeliculas.length; i++){
	bind(boxButton[i], i);
}

function bind(boton, i){
    boton.onclick = function(){
        alert("mensaje" + i);
    }
}

Muchas gracias y espero que no te sea engorroso el codigo ya que lo "resumí" para que veas lo necesario.

[ggomez91]

Hola, en tu código no veo como creas el arreglo de botones y no pude replicarlo. te dejo este código que hice que demuestra lo que te expliqué antes, espero te sirva:

http://chopapp.com/#t4duhuwk

También noto que usas eval para escribir tu javascript, por que no simplemente usas el dom? deberías evitar eval().

[rodricrzz]

Iniciado por ggomez91

Hola, en tu código no veo como creas el arreglo de botones y no pude replicarlo. te dejo este código que hice que demuestra lo que te expliqué antes, espero te sirva:

http://chopapp.com/#t4duhuwk

También noto que usas eval para escribir tu javascript, por que no simplemente usas el dom? deberías evitar eval().

Hola!
El boton (enlace) lo estoy creando aca:

Código:

for(var i=0; i<vecpeliculas.length; i++){
			eval("var boxButton" + i + "= document.createElement('a')");
			eval("boxButton" + i + ".innerHTML = 'AGREGAR'");
			eval("boxButton" + i + ".className = 'box-button'");
}

Utilizo eval() para poder crear las variables del DOM y poder concatenarlas con el indice, de modo que me genere las variables boxButton1, boxButton2, boxButton3... ya que luego debo llamarlas de forma independiente.

El sentido de todo esto es que al hacer click en cada boxButton me genere un contador que vaya sumando de uno en uno y ese valor lo guarde dentro del vector en la posicion "cantidad" que podes ver en la definicion de vecpeliculas. Por lo tanto la idea es que al hacer click en, por ejemplo, el primer boton, me guarde el numero de clicks (cont) en esa posicion, se entiende? Todo esto es para un trabajo que tengo que hacer un carrito de productos completamente en JS (se que no tiene sentido pero bueno, es lo que me pidieron en la facu) y entonces necesito saber la cantidad de unidades de ese producto, es decir, la cantidad de clicks que se hicieron en el boton de "agregar" para luego imprimirlo en el carro de compras.

Te comento todo esto ya que quizas encuentres una solucion mas copada y sencilla, quizas me estoy enroscando y hay alguna forma mas eficiente y facil de hacerlo.
Gracias maestro!

[ggomez91]

Ya entiendo mejor. El problema que veo es nunca estás agregando los boxButton1, boxButton2, ... boxButtonN a un vector llamado boxButton y sin embargo sí estás intentando acceder a dicho arreglo con: bind(boxButton[i], i);

Ahí estás pidiento el i-ésimo botón del arreglo pero tus botones tienen variables independientes. No sé si la parte en la que los agregues al arreglo la omitiste pero si no, ese es el problema.

Nota que boxButton[2] no es boxButton2.