ich habe eine variable anzahl von div's mit einer ID und versuche für diese ID's javascript funktionen zu erstellen...
Diese sind Closures und haben Zugriff auf den Variablen-Gültigkeitsbereich (Scope) der äußeren Funktion (siehe Scope-Chain). Die Variable i hat nach deren Ablauf den Wert 10, also haben bekommen alle verschachtelten Funktionen den Wert 10, wenn sie darauf zugreifen.
Das kannst du auf verschiedene Arten umgehen.
1. Für jedes Element eine individuelle Handlerfunktion erzeugen, die als Closure eine Variable einschließt, die sich nicht mehr ändert:
function makeHandler (i) {
return function handler () {
alert(i)
};
}
for (var i = 0, el; i < 10; i++) {
el = document.getElementById('xbegleitperson' + i);
if (!el) continue;
test.addEventListener('click', makeHandler(i), false);
}
Das sollte man aber aus Performancegründen nicht tun, wenn es um viele Elemente geht, siehe Performance von JavaScript-Closures.
2. Die Zahl im Handler aus dem id-Attribut lesen:
var prefix = 'xbegleitperson';
function handler () {
var i = Number(this.id.substring(prefix.length));
alert(i);
}
for (var i = 0, el; i < 10; i++) {
el = document.getElementById(prefix + i);
if (!el) continue;
test.addEventListener('click', handler, false);
}
Dafür bietet sich zudem Event-Delegation, also das Überwachen sämtlicher Klicks an zentraler Stelle:
var prefix = 'xbegleitperson';
document.addEventListener('click', handleBegleitperson, false);
function handleBegleitperson (e) {
var id = this.id;
if (id.substring(0, prefix.length) != prefix) return;
var i = Number(id.substring(prefix.length));
alert(i);
}
Damit spart man sich die Schleife komplett.
Der obige Beispielcode ist nicht getestet.
Mathias