• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Neues Element in Schleife erstellen

S

sascha83

New member
Hallo,

ich erstelle mir in einer Schleife ein neues DIV-Element. Das funktioniert soweit auch, allerdings werden mir ständig neue Container hinzugefügt.
Die Funktion in der sich die Schleife befindet wird mit einem Intervall ständig neu aufgerufen, damit Änderungen bei der Array-Länge mit eingeschlossen werden.

Code: 
    for(var j = 0; j < array.length; j++) {
        var div = document.createElement('div');
        div.id = 'test' + j;
        div.className = 'test';
        document.getElementById('main').appendChild(div);
        document.getElementById('test+j').innerHTML = j;
    }

Wie bekomme ich es hin, dass die Anzahl der erstellten Elemente immer der Länge meines Arrays entspricht, unter Ausführung des Intervalls?

Vielen Dank für Eure Hilfe.

VG
 
Zuletzt bearbeitet von einem Moderator:
Servus.
Du könntest alle in der Schleife erstellten DIVs erst löschen, bevor du sie neu (anhand der Array-Elemente) erstellst.
Müsste es statt
HTML: 
document.getElementById('test+j').innerHTML = j;
nicht
HTML: 
document.getElementById('test'+j).innerHTML = j;
heißen?
 
Hi,
erst einmal hast du recht
Code: 
document.getElementById('test'+j).innerHTML = j;
ist richtig.

Wenn ich die Elemente aber gleich wieder lösche, dann wird mir doch aber gar nichts ausgegeben?!
Code: 
document.getElementById(main).removeChild(div);
 
Zuletzt bearbeitet:
Sobald sich das Array ändert, löschst du alle "alten" DIVs, und erstellst anschließend alle DIVs neu auf Basis des aktualisierten Arrays.

Wann bzw. wodurch wird denn die for-Schleife aufgerufen? Oder bedeutet "ständig" dass sie als Endlos-Schleife ausgeführt wird?

Was für ein Objekt ist "main"?
 
An welcher Stelle lösche ich die DIVs? In der Schleife, außerhalb?

Die Schleife wird durch ein Intervall alle 200ms neu aufgerufen.

'main' ist einfach nur der Cointainer in den ich meine neuen DIVs schreibe.

Es ist auch scheinbar nur das erste Element, welches sich iterativ vervielfacht.
 
Zuletzt bearbeitet:
Guck Dir mal folgenden Code an, da steckt alles drin was ich meinte.

HTML: 
<html>
<head>
<meta charset="utf-8"/>
<style>
.test{
	margin:5px;
	background-color:#33aa33;
	float:left;
	}
</style>
</head>
<body>
<button onclick="fnUpdateDivContainer()">hier klicken um Array zu ändern und alle DIVs im Container zu löschen und neu zu schreiben</button>
<br>
<div id="main"></div>


<script>

var array = [];

/* aus performance-Gründen "main" vor Ausführung der Schleife 
einer Variablen zuweisen und nicht bei jedem Schleifen-Durchlauf
document.getElementById aufrufen */

var cont = document.getElementById('main');

var j;

function fnUpdateDivContainer(){
	
	/* alle DOM-Childs vom Container-DIV entfernen */

	while (cont.firstChild) {
		cont.removeChild(cont.firstChild);
		}
	
	/* Array Inhalt ändern */

	fnChangeArray();

	/* Schleife: divs neu schreiben */

	for(j = 0; j < array.length; j++) {
		var div = document.createElement('div');
		div.id = 'test' + j;
		div.className = 'test';
		cont.appendChild(div);

		/* getElementById folgend nicht nötig, das Element existiert ja 
		bereits */

		// document.getElementById('test'+j).innerHTML = j;

                /* statt dessen: */

		div.innerHTML = j + ": " + array[j];

                /* ich darf noch anmerken, dass mir die Verwendung von "div" als Variablen-Name 
                suspekt ist, auch wenn es zu funktionieren scheint */
		}
	}
	
/* Funktion, wird von innerhalb fnUpdateContainer aufgerufen, 
verändert mittels getTime() den Inhalt der einzelnen Array-Elemente */
	
function fnChangeArray(){
	var nd = new Date();
	array[0] = nd.getTime();
	array[1] = nd.getTime();
	array[2] = nd.getTime();
	array[3] = nd.getTime();
	array[4] = nd.getTime();
	}

fnUpdateDivContainer();

</script>

</body>
 
Zuletzt bearbeitet:
Super, schaue ich mir mal an ;)

Ich bin jetzt soweit, dass sich die DIVs erweitern, wenn sich die Länge des Arrays erhöht.
Bei Verringerung der Länge ändert sich der Inhalt der Container, die sich ausserhalb der Arraylänge befindenn nicht mehr.
Nur das löschen klappt irgendwie nicht, wenn die Länge kleiner wird.
 
Zuletzt bearbeitet:
Sei mir nicht böse, aber ich finde es zunehmend schwierig dir zu helfen. Was heißt den "DIVs erweitern", werden sie breiter? Was bedeutet "Länge des Arrays erhöht", meinst du wenn sich die Anzahl der Elemente vergrößert? Was sind denn Container außerhalb der Arraylänge"?
Bitte erstelle eine Kopie deines Codes, und zwar
- reduziert auf die für die Fragestellung relevante Abschnitte, dabei...
- gleichzeitig lauffähig, so dass ich ihn mit copy/paste übernehmen und testen kann, und außerdem
- lesbar formatiert, wenn nötig kommentiert
dann schaue ich nochmal rein.
 
Ja, das sehe ich absolut ein. Ich habe auch selbst gemerkt, dass ich mich um Kopf und Kragen geredet habe...

Code: 
<html>
<head>
<meta charset="utf-8"/>
<style>
.test{
	margin:5px;
	background-color:#33aa33;
	float:left;
	}
</style>
</head>
<body>
<form>
    <input type="number" name="size" id="size">   
</form>
<br>
<div id="main"></div>
<script>

var array = [];
var cont = document.getElementById('main');
var j;

function fnUpdateDivContainer(){
	while (cont.firstChild) {
		cont.removeChild(cont.firstChild);
		}

	fnChangeArray();

	for(j = 0; j < array.length; j++) {
		var cTime = document.createElement('div');
		cTime.id = 'test' + j;
		cTime.className = 'test';
		cont.appendChild(cTime);
		cTime.innerHTML = j + ": " + array[j];
		}
	}
	
function fnChangeArray(){
	var nd = new Date();
    var size = document.getElementById('size').value;
    for(var i = 0; i < size; i++){
    	array[i] = nd.getHours() + ':' + nd.getMinutes() + ':' + nd.getSeconds();
        }
	}

fnUpdateDivContainer();

window.setInterval(fnUpdateDivContainer, 1000);    
</script>
</body>
 
Das geht so nicht (wie du bemerkt hast). Die Schleife innerhalb fnChangeArray() erstellt neue (zusätzliche) Array-Elemente oder aktualisiert bereits vorhandene, aber sie löscht keine Elemente.

Was bedeutet: Wenn das Array drei Elemente hat, dann die Schleife zweimal durchlaufen wird, werden halt die ersten beiden Elemente aktualisiert, aber das vorhandene dritte Element bleibt ja trotzdem erhalten, und wird also auch angezeigt - deshalb funktionierts nur in die "größer" Richtung.

Wenn man das Array erst löscht (siehe neue erste Zeile in Funktion fnChangeArray()) und dann neu erstellt, funktionierts in beide Richtungen.

Vermutlich ist das für dein eigentliches Problem nicht der richtige Ansatz, aber für das Beispiel passt es - siehe Code.


HTML: 
<html>
<head>
<meta charset="utf-8"/>
<style>
.test{
	margin:5px;
	background-color:#33aa33;
	float:left;
	}
</style>
</head>
<body>
<form>
    <input type="number" name="size" id="size">   
</form>
<br>
<div id="main"></div>
<script>

var array = [];
var cont = document.getElementById('main');
var j;

function fnUpdateDivContainer(){
	
	while (cont.firstChild) {
		cont.removeChild(cont.firstChild);
		}

	fnChangeArray();

	for(j = 0; j < array.length; j++) {
		var cTime = document.createElement('div');
		cTime.id = 'test' + j;
		cTime.className = 'test';
		cont.appendChild(cTime);
		cTime.innerHTML = j + ": " + array[j];
		}
	}
	
function fnChangeArray(){
	array.length = 0;
	var nd = new Date();
        var size = document.getElementById('size').value;
        for(var i = 0; i < size; i++){
        	array[i] = nd.getHours() + ':' + nd.getMinutes() + ':' + nd.getSeconds();
                }
	}

fnUpdateDivContainer();


window.setInterval(fnUpdateDivContainer, 1000);    

</script>
</body>

- - - Aktualisiert - - -

Und dann probier doch mal was aus:

1. kommentiere deine setInterval Anweisung raus, und
2. ändere das Input so wie folgend dargestellt:
HTML: 
<input type="number" name="size" id="size" onchange="fnUpdateDivContainer()">

Vielleicht gefällt dir das ja, jedenfalls wäre es deutlich ressourcenschonender.
 
Zuletzt bearbeitet:
Hey super! Doch, damit werde ich mein Problem auf alle Fälle lösen können. Das ist genau so wie ich es brauche.

Vielen Dank!!!!

Und vielen Dank auch für die Tipps die du mir nebenbei noch gegeben hast. Die nehme ich sehr gerne an ;)
 
NB: Eine Node kann man schneller und einfacher komplett allen Inhalts berauben:
Code: 
cont.innerHTML = ""
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben