1UnitedPower: onclick = function(){}

Beitrag lesen

Meine Herren!

u[0].onclick = function(){v[0].innerHTML = "0";}

u[1].onclick = function(){v[1].innerHTML = "1";}
u[2].onclick = function(){v[2].innerHTML = "2";}
u[3].onclick = function(){v[3].innerHTML = "3";}
u[4].onclick = function(){v[4].innerHTML = "4";}
u[5].onclick = function(){v[5].innerHTML = "5";}
u[6].onclick = function(){v[6].innerHTML = "6";}
u[7].onclick = function(){v[7].innerHTML = "7";}


>   
> Die einfache for-Schleife allein funktioniert in diesem Fall bekanntlich nicht.  
  
Ah, ich weiß auf welches Problem die anspielst.  
  
~~~javascript
for (var i = 1; i<=7; i++ ) {  
   u[i].onclick = function(){ v[i].innerHTML = i; };  
}

Dieser Code würde bei jedem Klick auf eins der Elemente aus u eine 7 in das siebte Element in v schreiben. Das hat damit zu tun, dass die Event-Handler alle die Variable i gemeinsam nutzen. Eine bekannte Lösung dafür sieht so aus:

for (var i = 1; i<=7; i++ ) {  
   u[i].onclick = function( x ){  
      return function(){ v[x].innerHTML = x; };  
   }( i );  
}

Das seltsame Konstrukt nennt sich ein Closure.

Eine andere Schreibweise, die aber das selbe Prinzip aussnutzt:

for (var i = 1; i<=7; i++ ) {  
   u[i].onclick = function( x ){ v[x].innerHTML = x; }.bind(null, i);  
}

Ich habe so eine Ahnung, dass dein zu Grunde liegender Fall mit Event-Delegation noch eleganter gelöst werden könnte, zeig doch mal das passende HTML und etwas mehr von dem Skript.

--
“All right, then, I'll go to hell.” – Huck Finn