AddEventListener's funcionando como array

Kaneex · #1 (**permalink**) 10/03/2011, 15:07

Bien lo que me sucede es lo siguiente:

estoy creando un script para greasemonkey.
En una parte necesito que al clickear sobre un link, cambie una variable booleana, y para acceder a mis variables de GM necesito acceder a una función de este programa.

Para lo que necesito, no puedo crear una function de javascript dentro de la página, porque dentro de esta no puedo llamar al GM_setValue.

Probé utilizando un EventListener.

El problema que me surgio es el siguiente, yo recorro una serie de objetos en una tabla de la página y creo por cada uno de estos objetos un link. Pero al añadirle el evento al link (que lo hago dentro del for), todos los links terminan utilizando la misma funcion (es decir, no alteran el valor que deberían, sino solamente el ÚLTIMO valor que agregue al for).

La solución que se me ocurriría sería crear un array de event listeners pero no se como y no encuentro en la web ninguna forma de realizarlo

Nota 1: Vi que a algunos les paso algo similar, pero no con un programa para el greasemonkey, y la solucion que le dieron a ellos (que es que creen la funcion dentro del programa sin un addeventlistener) no me sirve, o si me sirve no se como acceder al GM_setValue y si pueden epxliquenme como

Nota 2: Si en el mas mínimo detalle no fui claro por favor pidanme y aclarare.

Panino5001 · #2 (**permalink**) 10/03/2011, 15:58

Lo más probable es que tengas un error como el que describen aquí:
http://blog.scriptia.net/articulos/2...esperados.html
Si es así, en esa misma página ofrecen una de las posibles soluciones. Si no, mostrá el código que estás usando.

Kaneex · #3 (**permalink**) 10/03/2011, 16:25

Cita:

Iniciado por Panino5001

Lo más probable es que tengas un error como el que describen aquí:
[url]http://blog.scriptia.net/articulos/2007/01/de-closures-y-valores-inesperados.html[/url]
Si es así, en esa misma página ofrecen una de las posibles soluciones. Si no, mostrá el código que estás usando.

No, no me lo soluciona (o estoy implementando mal la solución).

Tengo el for
{

thisElement = allElements[i];
function fillt(){
var juanito; // la variable de la solucion implementada
juanito=thisElement.innerHTML; //tambien probe directamente el allElements[i] //pero tampoco anda
GM_setValue(juanito,true);
alert("you've just untracked "+juanito);
}

//y mas tarde llamo la funcion desde el addeventlistener
a.addEventListener('click' , fillt, false);

//finalmente agrego el link:

thisElement.parentNode.insertBefore(a, thisElement.nextSibling);

}

el objeto funciona, y toma todo, pero todos los links me modifican el valor en el [i] correspondiente a el último valor de for

a.addEventListener('click' , fillt, false);

EDIT: por cierto, me olvide de agradecerte por tu atención al tema, es que este tema me tiene muy nervioso. Gracias desde ya por la respuesta brindada

Panino5001 · #4 (**permalink**) 10/03/2011, 22:39

Lo que estás haciendo (que está mal) es esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<style>
div{ width:300px; height:25px; line-height:25px; border:1px solid #000; font-size:14px; padding:3px; margin-bottom:2px}
</style>
</head>

<body>
<div>uno</div>
<div>dos</div>
<div>tres</div>
<script type="text/javascript">
function GM_setValue(j,t){
    //la agregamos para test fuera de GM
}
function fillt(i,e){
    e.preventDefault();
    if(document.getElementsByTagName('div')[i])
        var juanito=document.getElementsByTagName('div')[i].innerHTML;
    else{
        alert('el índice '+i+' es inválido');
        var juanito='Error';
    }
        
    GM_setValue(juanito,true);
    alert("you've just untracked "+juanito);
}
var allElements=document.getElementsByTagName('div'),length=allElements.length;
for(var i=0;i<length;i++){
    var a =document.createElement('a');
    a.href='#';
    a.innerHTML=allElements[i].innerHTML;
    a.addEventListener('click' , function(e){fillt(i,e);}, false);
    
    allElements[i].parentNode.insertBefore(a, allElements[i].nextSibling);

}
</script>

</body>
</html>

Lo que deberías hacer (por la razón que explica el enlace que te indiqué en mi post anterior) es esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<style>
div{ width:300px; height:25px; line-height:25px; border:1px solid #000; font-size:14px; padding:3px; margin-bottom:2px}
</style>
</head>

<body>
<div>uno</div>
<div>dos</div>
<div>tres</div>
<script type="text/javascript">
function GM_setValue(j,t){
    //la agregamos para test fuera de GM
}
function fillt(i,e){
    e.preventDefault();
    if(document.getElementsByTagName('div')[i])
        var juanito=document.getElementsByTagName('div')[i].innerHTML;
    else{
        alert('el índice '+i+' es inválido');
        var juanito='Error';
    }
        
    GM_setValue(juanito,true);
    alert("you've just untracked "+juanito);
}
var allElements=document.getElementsByTagName('div'),length=allElements.length;
for(var i=0;i<length;i++){
    var a =document.createElement('a');
    a.href='#';
    a.innerHTML=allElements[i].innerHTML;
    //a.addEventListener('click' , function(e){fillt(i,e);}, false);
    (function(i){a.addEventListener('click' , function(e){fillt(i,e);}, false);})(i);
    allElements[i].parentNode.insertBefore(a, allElements[i].nextSibling);

}
</script>

</body>
</html>

En este último código aparece comentada la línea errónea y la correcta debajo

Kaneex · #5 (**permalink**) 11/03/2011, 14:41

Código PHP:

  var allElements, thisElement; 
allElements = document.getElementsByTagName('li'); 
n=0; 
 
for (var i = 16; i < 25; i++) { 
 
 
var a = document.createElement('a'); 
a.href = '#'; 
thisElement = allElements[i]; 
function fillt(i,e){ 
e.preventDefault(); 
juanito=thisElement; 
GM_setValue(juanito.innerHTML,true); 
alert("you've just tracked "+juanito.innerHTML); 
} 
 
function fillf(i,e){ 
e.preventDefault(); 
juanito=thisElement; 
GM_setValue(juanito.innerHTML,false); 
alert("you've just untracked "+juanito.innerHTML); 
} 
//alert(thisElement.innerHTML); 
//alert(GM_getValue(thisElement.innerHTML)); 
if(GM_getValue(thisElement.innerHTML)==true){ 
a.appendChild(document.createTextNode('Untrack')); 
(function(i){a.addEventListener('click' , function(e){fillf(i,e);}, false);})(i); 
//thisElement.parentNode.insertBefore(b, thisElement.nextSibling); 
} 
else{ 
 
a.appendChild(document.createTextNode('Track')); 
(function(i){a.addEventListener('click' , function(e){fillt(i,e);}, false);})(i); 
// 
} 
thisElement.parentNode.insertBefore(a, thisElement.nextSibling); 
//alert(thisElement.innerHTML); 
//thisElement.parentNode.insertBefore(newElement, thisElement.nextSibling); 
 
}

Es el codigo de mi script. Lo correji como me mandaste la últiam correccion (o eso creo) y aún así me sigue devolviendo siempre el último valor.

Si querés fijarte lo que te digo es un script para greasemonkey para www.cuevana.tv/series.

De nuevo gracias por la ayuda! y disculpá que sea tan lento, es mi primer script java y estaba tratando de no abusar de la ayuda de los que estan aca, pero me trabe con esto y no lo pude solucionar :/