For Schleife nur Schleifen 1 mal JavaScript

Question

Hallo ich versuche, eine for-Schleife zu machen, die automatisch "Punkte" abhängig von wie viele Bilder gibt, ich benutze die myArrImg.length, aber es gibt nur eine li mit einer Klasse von Punkten noch einmal, obwohl es viermal tun sollte? kann mir jemand helfen :)

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg']; 

function dotsAuto(){ 
    var test = document.getElementById('test'); 
    var li = document.createElement('li'); 
    li.className = 'dots'; 

    for (i = 0; i < myArrImg.length; i++) { 
    test.appendChild(li); 
    } 
} 
dotsAuto(); 

Answer 1

Ihr Problem ist nicht, was Sie denken. Die Schleife wird die richtige Anzahl von Malen ausgeführt, aber es tut nicht, was Sie beabsichtigen.

Das Problem ist, dass Sie immer nur ein li Element erstellen. Sie fügen dann wiederholt das gleiche Element ein. So denkt der Browser, dass Sie das tun:

Erstellen Sie ein li Element. Gib es eine className. Starten Sie nun das myArrImg Array. Fügen Sie das erste Mal das Element li ein. Zum zweiten Mal das Element li einfügen. Zum dritten Mal das Element li einfügen. Und so weiter.

Sie müssen jedes Mal neue Elemente li erstellen, da jedes Element nur einmal im Dokument vorhanden sein kann. Im Wesentlichen das Element aus dem Dokument, Sie halten zu entfernen und es wieder an der gleichen Stelle setzen, um neue Elemente jedes Mal zu erstellen, erstellen Sie die li innerhalb der Schleife:

var li; 

for (i = 0; i < myArrImg.length; i++) { 
    li = document.createElement('li'); 
    li.className = 'dots'; 
    test.appendChild(li); 
} 

Answer 2

Hier habe ich eine ul erstellt seit JSFiddle nicht Dokument manipulieren lässt, aber der Prozess ist der gleiche

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg']; 
 

 
function dotsAuto(){ 
 
    var test = document.getElementById('test'); 
 

 

 
    for (i = 0; i < myArrImg.length; i++) { 
 
    var li = document.createElement('li'); 
 
     li.className = 'dots'; 
 
     li.innerHTML = myArrImg[i]; 
 
\t test.appendChild(li); 
 
    } 
 
} 
 
dotsAuto();

<ul id="test"> 
 

 
</ul>

Grundsätzlich Sie erstellen ONE li für EACH Schleife Zyklus, und dann an die Liste anhängen