EventHandler Problem

[gd0123456]

Hallo,

mal einen Frage warum fügt er nicht jedem Element eine Funktion onMouseDown hinzu?
Wenn ich mir i ausgeben lasse bekomme ich immer die Zahl 13 zurück egal auf welchen Link ich klicke.
Kann mir da jemand helfen? danke
Die Spalten gehen von 1 bis 12.
<table>
<tr>
<td height=43px>&nbsp;</td>
<td height=43px id = 'link10'>Add-Ons kaufen</td>
</tr>
<tr>
<td height=43px>&nbsp;</td>
<td width=200px height=43px id = 'link11'>Add-Ons abbestellen</td>
</tr>
<tr>
<td height=43px>&nbsp;</td>
<td height=43px id = 'link12'>&Uuml;bersicht gekaufte Add-Ons</td>
</tr>
</table>

<script language = 'JavaScript'>
var count = 0;
for (i = 1;i< 14;i++)
{
count++;
document.getElementById("link"+count).addEventListener(
"mousedown",
function () {
alert(count);
},
false);
}
</script>

 

[Sempervivum]

Interessantes Problem. Die Lösung ist folgende: Die anonyme Funktion bei deinem Eventlistener wird ja erst ausgeführt, wenn man auf die Zelle klickt. Dann ist die Schleife längst durchgelaufen und die Variable count hat den Wert 14. Eine Lösung sieht so aus:

document.getElementById("link" + count).addEventListener(
     "mousedown",
     function (cnt) {
           return function () {
               alert(cnt);
           };
     } (count),
false)

Hier wird die äußere anonyme Funktion sofort ausgeführt mit der Variablen count als Eingangsparameter. In der inneren Funktion wird auf diesen Parameter zugegriffen mit dem Wert, den er zur Laufzeit der Schleife hat. Die äußere Funktion liefert die innere als Rückgabewert, so dass die innere als Parameter an addEventListener übergeben wird und das Event bearbeitet.
Ich hab's jetzt nicht getestet, aber so müsste es eigentlich funktionieren. Wenn nicht, melde dich wieder, dann probiere ich es aus.

 

[Sempervivum]

Hab's jetzt getestet und festgestellt, dass ich doch einen Fehler gemacht hatte. So funktioniert es:

document.getElementById("link" + count).addEventListener(
     "mousedown",
     function (cnt) {
           return function () {
               alert(cnt);
           };
     } (count),
false);

Hab's oben auch geändert, damit Code und Beschreibung zusammen passen.

 

[gd0123456]

Danke funktioniert einwandfrei. Danke für die schnelle Hilfe.

Ach ja noch eine Frage: was bewirkt das (Count) ?

 

[Sempervivum]

Das bewirkt, dass die Funktion sofort ausgeführt wird:

function (cnt) { }

bewirkt, dass die Funktion nur definiert wird.

function (cnt) { } (count)

bewirkt, dass die Funktion definiert und gleich ausgeführt wird, so als würde man schreiben:

function x(cnt) { };
x(count);