www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Jul 2012
    Posts
    11

    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";});
    }
    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

  2. #2
    Join Date
    Jul 2012
    Posts
    11
    can someone help me?

  3. #3
    Join Date
    Nov 2010
    Posts
    1,082
    tal vez.

    for starters, this:
    Code:
    for(i=0; i< event_cel.lenght; i++){
    should be this:
    Code:
    for(i=0; i< event_cel.length; i++){
    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

  4. #4
    Join Date
    Jul 2012
    Posts
    11
    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;
    }

  5. #5
    Join Date
    Jul 2012
    Posts
    11
    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

    HTML Code:
    ...<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>....

    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

  6. #6
    Join Date
    Jul 2012
    Posts
    11
    two more functions that are called by the above that showed
    Code:
    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;
    }

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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);
    	};
    }
    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));

  8. #8
    Join Date
    Jul 2012
    Posts
    11
    Thank you so much toicontien. I will test that and then tell you what happened, Thank you, thank you so much

  9. #9
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    changes to post #1 in red:

    Code:
    for(i=0; i< event_cel.lenght; i++){
    
    .....
    
    (function scope(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";});
    
    }(i));
    
    }
    edit: you don't even need the "i" in this example because pasando is now private ...

  10. #10
    Join Date
    Jul 2012
    Posts
    11
    Quote Originally Posted by rnd me View Post
    changes to post #1 in red:

    Code:
    for(i=0; i< event_cel.lenght; i++){
    
    .....
    
    (function scope(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";});
    
    }(i));
    
    }
    edit: you don't even need the "i" in this example because pasando is now private ...
    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;
    	}
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles