/    Sign up×
Community /Pin to ProfileBookmark

Creating three events in a for, all keep the same argument

hello, thank you to all that reply my problem. The topic is that:

i have a for that show different content in the table, an for iteration by each table cell

[code]for(i=0; i< event_cel.lenght; i++){

…..

var pasando = ‘celda’+(eve[i][2]+dia_i);
pasando=pasando.toString();
crearEvento(elem,’click’, function(){dale(pasando);});
crearEvento(elem,’mouseover’, function({document.getElementById(pasando).style.border=”2px #FFCC00 solid”;});
crearEvento(elem,’mouseout’, function(){document.getElementById(pasando).style.border=”0px #FFFFFF solid”;});
}

[/code]

the events are assigned but this tree events in all cells that i apply thus, had the same fuction´s arguments.

When i pass over cell 1 show the message that would show in the last cell iterated, understand?

cell1 innerHTML -> HOLA
cell 5 innerHTML -> CHAU

cell 10 innerHTML -> COMO ESTAN

when i pass the mouse over, out or click in each cell, all work like if all events work just for the last cell. If it would happend with the first, i would think that the for isnt work properly, but not, is with the last.

would imagine that i want make a table where each cell had their mouseout and over that affect with special effects to each one, but when i pass mouse over each cell, always modify the last :S ?

Can Someone help me? Thank you so much

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@PergaminoauthorAug 31.2012 — can someone help me?
Copy linkTweet thisAlerts:
@xelawhoAug 31.2012 — tal vez.

for starters, this:
[CODE]for(i=0; i< event_cel.lenght; i++){[/CODE]

should be this:
[CODE]for(i=0; i< event_cel.length; i++){[/CODE]

but what you're describing sounds a lot like a problem with function closure. Fix the typo, and if that doesn't work post some more code, preferably your html and js
Copy linkTweet thisAlerts:
@PergaminoauthorAug 31.2012 — Ok, these sentence has been while i was writing this topic, the pasted original code is it:

[CODE]function shows(mesp,anop){
var eve=window['eventos'];
var dia_i=calculaNumeroDiaSemana(1,mesp,anop);
for(var i=0;i<eve.length;i++)
if(eve[i][0]==anop && eve[i][1]==(mesp+1)){
var elem=new Object();
elem=document.getElementById('celda'+(eve[i][2]+dia_i));
esta=false;
for(var g=0;g<window['evento_celda'].length;g++)
if(window['evento_celda'][g][0]=='celda'+(eve[i][2]+dia_i)){esta=true; window['evento_celda'][g][4]+=1;}
if(!esta){
var tempi=new Array();
tempi=["celda"+(eve[i][2]+dia_i),elem.innerHTML,mesp,anop,1];
window['evento_celda'].push(tempi);
//alert('EVENTO_CELDA: '+window['evento_celda'].length);
elem.style.color="#FFFFFF";
elem.style.backgroundColor="#00CCFF";
elem.style.fontWeight="bold";
elem.style.cursor='pointer';
}
//elem.innerHTML=eve[i][2];
//eve[i][2],eve[i][1],eve[i][0]
//'+eve[i][2]+','+eve[i][1]+','+eve[i][0]+'
/*pasando = 'celda'+(eve[i][2]+dia_i);
pasando=pasando.toString();
(function (i){document.getElementById(pasando).onclick = function() {dale(pasando);};})(i);
(function (i){document.getElementById(pasando).onmouseover = function () {document.getElementById(pasando).style.border="2px #FFCC00 solid";};})(i);
(function (i){document.getElementById(pasando).onmouseout = function () {document.getElementById(pasando).style.border="0px #FFFFFF solid";};})(i);*/

/*
These are some tryes that did for see if work in some way
(function(i){crearEvento(elem,'click', function(){dale(pasando);});})(i);
(function(i){crearEvento(elem,'mouseout', function(){fonmouseout(pasando);});})(i);
(function(i){crearEvento(elem,'mouseover', function(){fmouseover(pasando);});})(i);
*/


//crearEvento(elem,'mouseover', function(){fmouseover(pasando);});
/*crearEvento(elem,'click', (function(i){dale(pasando);})(i));
crearEvento(elem,'mouseover', (function(i){fmouseover(pasando);})(i));
crearEvento(elem,'mouseout', (function(i){fonmouseout(pasando);})(i));

Finally i has been added "onmouseover=fonmouseover(this)" in html source by each table cell and then when call the function i check if id´s cell correspond to special cell to start the real work function made for*/
}
var ari = new Array();
ari = window['evento_celda'];
for(var g=0; g<ari.length; g++)
if(ari[g][4]>1)
document.getElementById(ari[g][0]).innerHTML+='<sup>('+ari[g][4]+')</sup>';
return true;
}[/CODE]
Copy linkTweet thisAlerts:
@PergaminoauthorAug 31.2012 — The work that im doing is show a calendar, and in the special date.. this cell must had their mouseover mouseout and click event. I did that thus: A table size 6 files by 7 column (one by each week day). Depending of where start the first month&#180;s day is since where i start chanching the cell&#180;s "innerHTML" by the number up to the last day (31, 30 or 28/29 by february). In each pass of the for, i check if the specific cell correspond to an special day and to this getElementById(id) i add three event. mouseover out and click. Reading some web i see that the event are called with determinated delay that its shown with this problem, that when the eventlistener is called, the used var for function&#180;s argument has been change their value and all events created affect to the last cell checked. Understand my problem? in the code above, i scape this try because now did that by hand in html but my html is some thus

[code=html]...<table width="100&#37;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/Domingo.jpg" width="40" height="40" /></td>
<td><img src="img/Lunes.jpg" width="40" height="40" /></td>
<td><img src="img/Martes.jpg" width="40" height="40" /></td>
<td><img src="img/Miercoles.jpg" width="40" height="40" /></td>
<td><img src="img/Jueves.jpg" width="40" height="40" /></td>
<td><img src="img/Viernes.jpg" width="40" height="40" /></td>
<td><img src="img/Sabado.jpg" width="40" height="40" /></td>
</tr>
<tr>
<td onmouseover="fmouseover(event,event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda1"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda2"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda3"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda4"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);"align="center" id="celda5"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda6"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda7"></td>
</tr>
<tr>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda8"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda9"></td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda10">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda11">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda12">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda13">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda14">&nbsp;</td>
</tr>
<tr>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda15">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda16">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda17">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda18">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda19">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda20">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda21">&nbsp;</td>
</tr>
<tr>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda22">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda23">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda24">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda25">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda26">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda27">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda28">&nbsp;</td>
</tr>
<tr>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda29">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda30">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda31">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda32">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda33">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda34">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda35">&nbsp;</td>
</tr>
<tr>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda36">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda37">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" style="height:30px" align="center" id="celda38">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda39">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda40">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda41">&nbsp;</td>
<td onmouseover="fmouseover(event,this);" onmouseout="fonmouseout(this);" onclick="dale(this);" align="center" id="celda42">&nbsp;</td>
</tr>

</table>....[/code]



I just pasted the most important part of html code, because work perfectly thus with this event in html but thnink that its so primitive style and i must learn work with event for do very good and quickly works and low transfer used of data in my hosting by each user.

If you can help me i will be so gratefull with you, Greetings, Leonardo
Copy linkTweet thisAlerts:
@PergaminoauthorAug 31.2012 — two more functions that are called by the above that showed function crearEvento(elemento, evento, funcion) {
if (elemento.addEventListener) {
elemento.addEventListener(evento, funcion, false);
} else {
elemento.attachEvent("on" + evento, funcion);
}
return true;
}

function removeEvent(node ,evt, fnc){
if (node.removeEventListener)
node.removeEventListener(evt,fnc,false);
else if (node.detachEvent){
node.detachEvent('on'+evt,fnc);
}
else
return false;
return true;
}
Copy linkTweet thisAlerts:
@toicontienSep 01.2012 — You need to take advantage of a function closure to maintain the value of pasando when the DOM events are fired:
[CODE]function createMouseover(pasando) {
return function() {
document.getElementById(pasando).style.border="2px #FFCC00 solid";
};
}

function createMouseout(pasando) {
return function() {
document.getElementById(pasando).style.border="0px #FFFFFF solid";
};
}

function createClick(pasando) {
return function() {
dale(pasando);
};
}[/CODE]


And to use them:
[CODE]var pasando = 'celda'+(eve[i][2]+dia_i);
pasando=pasando.toString();
crearEvento(elem,'click', createClick(pasando));
crearEvento(elem,'mouseover', createMouseover(pasando));
crearEvento(elem,'mouseout', createMouseout(pasando));[/CODE]
Copy linkTweet thisAlerts:
@PergaminoauthorSep 02.2012 — Thank you so much toicontien. I will test that and then tell you what happened, Thank you, thank you so much ?
Copy linkTweet thisAlerts:
@rnd_meSep 03.2012 — changes to post #1 in red:

[CODE]for(i=0; i< event_cel.lenght; i++){

.....

[COLOR="Red"](function scope(i){[/COLOR]

var pasando = 'celda'+(eve[i][2]+dia_i);
pasando=pasando.toString();
crearEvento(elem,'click', function(){dale(pasando);});
crearEvento(elem,'mouseover', function({document.getElementById(pasando).style.border="2px #FFCC00 solid";});
crearEvento(elem,'mouseout', function(){document.getElementById(pasando).style.border="0px #FFFFFF solid";});

[COLOR="Red"]}(i));[/COLOR]

}[/CODE]


edit: you don't even need the "i" in this example because pasando is now private ...
Copy linkTweet thisAlerts:
@PergaminoauthorSep 04.2012 — changes to post #1 in red:

[CODE]for(i=0; i< event_cel.lenght; i++){

.....

[COLOR="Red"](function scope(i){[/COLOR]

var pasando = 'celda'+(eve[i][2]+dia_i);
pasando=pasando.toString();
crearEvento(elem,'click', function(){dale(pasando);});
crearEvento(elem,'mouseover', function({document.getElementById(pasando).style.border="2px #FFCC00 solid";});
crearEvento(elem,'mouseout', function(){document.getElementById(pasando).style.border="0px #FFFFFF solid";});

[COLOR="Red"]}(i));[/COLOR]

}[/CODE]


edit: you don't even need the "i" in this example because pasando is now private ...[/QUOTE]


I will try and then tell you. A problem that has much problem form me, was that whan i deleted the cell´s event it work perfectly but perhaps isnt a definitive memory delet because when in somemoment the same cell must have again the three events it work like if i did two time "click" on this cell or n times as i delete and creat again. When i delet the event would seem that just is disable but when i creat it again, the disabled event are enable and created others new that all do the same. All onClick of determinated cell do The same, mouseover and mouseout too. I fixed this problem thus:

[CODE] var esta = false;
avanti=window['evento_celda'];
for(var u=0; u<avanti.length;u++)
if(avanti[u][0]==atemp.id){ esta=true;}
if(!esta) {return;}
var a= new Date();
var atiempo=a.getTime();
if((atiempo-window['fix_events'])<3){
window['fix_events']=atiempo;
return false;
}[/CODE]


Here i test if the milliseconds between that the function is called again is´t over 3, if is less than that then return false and thus I avoid undesired function´s calls.
×

Success!

Help @Pergamino spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...