[GELÖST] In Schleifen Elemente mit onclick, das individuelles setInterval auslöst, erstellen

[JohannesV]

Liebe Forumsbesucher,

mein Code erstellt drei divs und weist diesen eine Funktion per onclick-event zu. Die divs sind zu Beginn mit "0" beschriftet. Klickt man auf ein div, zählt dieses Div jede Sekunde und zeigt die neue Zahl an, bis es bei "10" angelangt ist, dann hört es auf. Danach reagiert dieses div nicht mehr aufs Klicken. Die drei divs können - je nach Klick - unabhängig voneinander zählen. Mein erster Code sieht wie folgt aus:

//Beim Laden des HTML-Dokuments divs erstellen
for (Zaehler = 0; Zaehler < 3; Zaehler ++) {
var Teil = document.createElement('div');
Teil.id = 'T'+Zaehler;
Teil.onclick = function () {Klick(this.id)};
Teil.innerHTML = '0';
// Zusätzlich Zuweisung eines className fürs Aussehen
document.body.appendChild(Teil);}

//Verhalten der Divs, wenn der Benutzer geklickt hat
function Klick (Teil) {
if (document.getElementById(Teil).innerHTML == '0') {
var Zaehlen = setInterval (function () {
var Zahl = Number(document.getElementById(Teil).innerHTML);
if (Zahl < 10) {
document.getElementById(Teil).innerHTML = Zahl+1;}
else {clearInterval(Zaehlen);}},1000);}
}

Das Problem ist: Für jedes der drei div wird die gleiche Variable "Zaehlen" als setInterval verwendet. Das darf natürlich nicht sein, weil die divs unabhängig voneinander bei "10" mit dem Zählen aufhören sollen. Ich hätte zwar eine Lösung mit einem Array. Für jedes div wird im gemeinsamen Array die jeweilige Zahl gespeichert:

var Zahlen = [];
function Klick (Teil) {
var X = Teil.substr(1);
if (Zahlen[X]) {
Zahlen[X] += 1;
document.getElementById(Teil).innerHTML = Zahlen[X];}
else {
if (Zahlen[X] < 10) {
var Zaehlen = setInterval (function () {
Zahlen[X] = 1;
document.getElementById(Teil).innerHTML);},1000);}}
}

Aber das ist sehr unsauber, weil Zaehlen immer weiter zählt, auch wenn die "10" erreicht ist. Was, wenn ich 100 statt drei div hätte? Dann liefen alle setInterval parallel (im "Leerlauf"), was viel Rechenleistung verschwendet.
Welche Lösung gibt es ohne ein derartiges Array? Kann ich ähnlich dem ganz oben stehenden Code arbeiten, aber mit individueller Variable fürs setInterval?

Danke im Voraus für alle Antworten!

Johannes

 

[kkapsner]

Für jedes der drei div wird die gleiche Variable "Zaehlen" als setInterval verwendet.

Nein, das ist falsch. Zaehlen ist eine lokale Variable in der Funktion Klick() und somit für jeden Aufruf getrennt. Deswegen sollte der Ansatz eigentlich funktionieren. Was hat denn bei den Versuchen nicht funktioniert?

PS: Du solltest dir dringend angewöhnen, deinen Code sauber zu formatieren.
PPS: Man kann den Code noch viel effektiver machen, wenn man auf die Objekte nicht per ID zugreift. Du hast im onclick ja sowieso schon eine Referenz auf die Node:

//Beim Laden des HTML-Dokuments divs erstellen
for (Zaehler = 0; Zaehler < 3; Zaehler++){
	var Teil = document.createElement('div');
	Teil.onclick = function(){
		Klick(this)
	};
	Teil.innerHTML = '0';
	Teil.value = 0;
	document.body.appendChild(Teil);
}

//Verhalten der Divs, wenn der Benutzer geklickt hat
function Klick(Teil){
	if (Teil.value === 0){
		var Zaehlen = window.setInterval(function(){
			if (Teil.value < 10){
				Teil.value += 1;
				Teil.innerHTML = Teil.value;
			}
			else{
				window.clearInterval(Zaehlen);
			}
		}, 1000);
		Teil.onclick = null;
	}
}

PPPS: So wirklich akkurat ist das window.setInterval() nicht - das kann gerne mal 100 ms daneben liegen. Wenn du das genau haben willst, musst du mit Date arbeiten.

 

[JohannesV]

Danke kkapsner für die geduldige Antwort. Durch Dich ermutigt, habe ich den Code noch einmal durchgesehen und einen Fehler entdeckt, den ich oben in der Beschreibung nicht mehr gemacht hatte. Das Problem hatte ich dann auf die Variable "Zaehlen" geschoben.
Privat spare ich gerne an Platz im Quellcode, doch dann habe ich die schlechte Angewohnheit, die unsaubere Formatierung auch im Forum zu verwenden.
Danke auch für den Code ohne Id-Zugriff. Dieses Notationsweise kannte ich noch nicht. Ebenso wusste ich nicht, dass setInterval ungenau sein kann.

Aus Deiner Antwort habe ich wieder viel gelernt!
(Wer weiß, wie's geht, kann diese Frage gerne auf [GELÖST] stellen)

 

[kkapsner]

Danke kkapsner für die geduldige Antwort.

Bitte gern geschehen.

Privat spare ich gerne an Platz im Quellcode

Auch dort ist es eine

schlechte Angewohnheit

Mach' das immer, dann ist das schön automatisiert und du muss nicht weiter darüber nachdenken.

Aus Deiner Antwort habe ich wieder viel gelernt!

Perfekt. So soll es sein.