[SOLUCIONADO] onclick se ejecuta automaticamente en la creacion

[newb]

saben porque al crear las imagenes ingresa a este metodo inmeditamente habilitando la ventana flotante sin haber dado click?.
Ademas, una vez cerrada la ventana no vuelve a suceder el evento, es como que si no se le hubiese asignado ese evento a las imagenes.

Código Javascript:

//el parametro datos es el nombre del archivo .json, en este caso "datosLibros.json"
function cargarLibros(datos){
    loadJSON(cargarLibros,datos);
    var libros=JSON.parse(datos);
    var ref=document.getElementById("librosInternacionales");
    var s="";
    for(var i=0;i<libros.length;i++){
        
        var div=document.createElement("div");
        div.className="divImg";
        div.id="foto"+i;
        ref.appendChild(div);
        
        var imagen=document.createElement("img");
        imagen.className="fotos";
        imagen.src="imagenes/libro"+i+".jpg";
        imagen.alt="imagen_libro";
        imagen.onclick=clickImg(libros,""+i); //En esta linea es donde salta al metodo clickImg sin haber dado click
        
        
        div.appendChild(imagen);
        
    }
}
 
 
//----------------Este es el metodo que se ejecuta al dar click en una imagen, el que quiero agregar como atributo on click a cada imagen----------------
 
function clickImg(datos,numFoto){
   
    var libros=datos;
    var a=document.getElementById("ventana-flotante");
    a.style.visibility='visible';
            
    var v=document.getElementById("contenedor");
            
    var obj=new Object();
    s=obj.dato1=libros[numFoto].titulo;
    v.innerHTML=s;
    
}
 
 
 
 
 
function loadJSON(callback, jsonFile) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
 
    xobj.open('GET', jsonFile, true);
 
    xobj.onreadystatechange = function () {
        if (xobj.readyState === 4 && xobj.status === 200) {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}
 

[Fernand0]

Porque no se declara de esa manera. Al hacerlo de esa manera automaticamente la funcion se ejecuta.

Tenes 4 maneras de hacerlo

Código Javascript:

imagen.onclick= function() { clickImg(libros,""+i); };
 

Código Javascript:

imagen.onclick=clickImg; // no podrias pasar argumentos ("libros,""+i")
 

Código Javascript:

imagen.addEventListener("click", clickImg); // no podrias pasar argumentos
 

Código Javascript:

imagen.addEventListener("click", function() {
    clickImg(libros,""+i);
});
 

[dashtrash]

Iniciado por Fernand0

Porque no se declara de esa manera. Al hacerlo de esa manera automaticamente la funcion se ejecuta.

Tenes 4 maneras de hacerlo

Código Javascript:

imagen.onclick= function() { clickImg(libros,""+i); };
 

Código Javascript:

imagen.addEventListener("click", function() {
    clickImg(libros,""+i);
});
 

Esas dos formas son incorrectas. La variable i dentro de las funciones está referenciando una variable definida en un entorno donde es índice de un bucle.Por lo tanto, cuando se ejecute ese callback, independientemente de la imagen sobre la que se haga click, la variable "i" siempre valdrá libros.length.
Si quieres hacerlo así, tienes que hacer que la variable "i" referencie a una variable definida en un contexto diferente.Por ejemplo:

Código Javascript:

imagen.onclick= (function(i) { return function() { clickImg(libros,""+i); }})(i);
 

Eso es una función autollamada, que retorna una función callback, que es la que se asigna al evento.
Lo importante es que la variable "i" de esa función callback, ya no referencia a la variable "i" del bucle.Referencia al parámetro "i" de la función autollamada, por lo que tiene su propia "copia", y no sufre del problema anterior.

[Fernand0]

Yo que sepa las variables primitivas no referencian a nada, pero bueno.

Aca te dejo newb: jsFiddle1, jsFiddle2

[dashtrash]

Iniciado por Fernand0

Yo que sepa las variables primitivas no referencian a nada, pero bueno.

Aca te dejo newb: jsFiddle1, jsFiddle2

Pues entonces, no sabes mucho.Las variables están definidas en un entorno, y cuando se produce un closure javascript, esas variables se resuelven en un entorno determinado.Una variable siempre es una etiqueta que hace referencia a un valor que está definido en un entorno.

En tus fiddles, pones sólo 1 div.Prueba con 3 divs.Te dejo el fiddle:https://jsfiddle.net/Lo5b79co/.
Haz click en cualquier div.
Qué valor de i ves?

Ahora prueba este
https://jsfiddle.net/byg0Lhrg/2/
Qué valor de i ves?

[Fernand0]

Tenes razon, te felicito.

Ahora anda a terapia para resolver tu complejo de inferioridad..
Totalmente innecesaria la forma de dirigirse asi..

[dashtrash]

Iniciado por Fernand0

Tenes razon, te felicito.

Ahora anda a terapia para resolver tu complejo de inferioridad..
Totalmente innecesaria la forma de dirigirse asi..

Si no sabes demasiado, al menos, no seas condescendiente ("Que yo sepa...pero bueno..."), justo antes de volver a dar un mal consejo.Recibirás mejores formas de dirigirse a tí.
Y, sobre todo, cuando se te explica por qué lo que dices falla, antes de seguir dirigiendo mal a una persona publicando código, podrías molestarte en comprobar si es cierto lo que se te ha dicho.

[Fernand0]

Te propongo TRASH.. que como Colaborador, te remitas a COLABORAR y no a buscar pelea con otro usuario... No tenes idea de que connotacion tenia mi oracion, si queres buscar pelea o estas mal de la cabeza anda a otro lado o tene la decencia de sacarte el titulo de COLABORADOR.
Ni siquiera me dirigi a vos, asi que como voy a ser condescendiente...?

Hacete ver o madura, no se cuantos años tendras como para andar buscando pelea un viernes a la mañana...

Suerte a todos.

[dashtrash]

Buf...Buscar pelea..Que si decencia, que si mal de la cabeza, que si madure....
Es mucho más sencillo:
- Das una respuesta equivocada.
- Se te corrige.
- Insistes.
- Se te demuestra
- Te enfadas.

"No sabes mucho" no es un insulto.Es un hecho, demostrado porque el error que cometes es usual en personas con poca experiencia en javascript, ergo, "no sabes mucho".Pero, en vez de leer mi respuesta, asimilarla, y probarla, cosa que cualquier persona madura debería hacer, sobre todo si es técnico, no sólo lo ignoras, sino que, respuesta a respuesta, vas subiendo el nivel de falta de respeto.
Lo que hago como colaborador, es , entre otras cosas, corregir respuestas incorrectas.