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