Looping durch Bilder Array und zeigt sie auf HTML-Seite

Question

Ich habe Probleme mit meinem JS-Code und ich hoffe, Sie können mir helfen, mir zu helfen. Alles, was ich tun möchte, ist, 5 Bilder, die in einem Array gespeichert sind, zu wiederholen und im Grunde auf meine HTML-Seite zu stellen.

JS:

function functieArray(){ 
    for (i = 0; i < imgArray.length; i++) { 
     imgArray[i]; 
    } 
    document.getElementById("pozeGallery").innerHTML = imgArray.src; 
}; 

var imgArray = new Array(); 
imgArray[0] = new Image(); 
imgArray[0].src = 'img/Gallery/poza0.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'img/Gallery/poza1.jpg'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'img/Gallery/poza2.jpg'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'img/Gallery/poza3.jpg'; 

imgArray[4] = new Image(); 
imgArray[4].src = 'img/Gallery/poza4.jpg'; 

HTML:

<button onclick='functieArray()' class='galleryButons'>Category 1</button> 
     <div id='pozeGallery'> </div> 

Answer 1

Sie müssen sie tatsächlich an den DOM anhängen für sie zu zeigen.

die appendChild() Methode

In Ihrem Fall verwenden:

function functieArray() { 
    var gallery = document.getElementById("pozeGallery"); 
    for (i = 0; i < imgArray.length; i++) { 
     gallery.appendChild(imgArray[i]); 
    } 
}; 

Beachten Sie auch, dass Sie in Ihrem Codebeispiel nicht functieArray überall anrufen, so dass es nicht funktionieren könnte.

Answer 2

Um den HTML-Code der Image Objekte zu erhalten, verwenden Sie Image#outerHTML. Dann können Sie einfach das Array durchlaufen, indem Sie es zur Galerie innerHTML hinzufügen.

Hier ist, wie Sie Ihren Code beheben sollte (ich für die Erstellung der Image Objekte eine Schleife verwenden, werde):

var imgArray = []; 
 
for (i = 0; i < 5; i++) { 
 
    imgArray[i] = new Image(); 
 
    imgArray[i].src = 'img/Gallery/poza' + i + '.jpg'; 
 
} 
 

 
function functieArray() { 
 
    var images = imgArray.map(img => img.outerHTML).join(''); 
 
    document.getElementById("pozeGallery").innerHTML = images; 
 
}

<button onclick='functieArray()' class='galleryButons'>Category 1</button> 
 
<div id='pozeGallery'></div>

Answer 3

Versuchen Sie dies;)

function functieArray() { 
 
    var gallery = document.getElementById("pozeGallery"); 
 
    for (i = 0; i < imgArray.length; i++) { 
 
     gallery.appendChild(imgArray[i]); 
 
    } 
 
}; 
 
var imgArray = new Array(); 
 
imgArray[0] = new Image(); 
 
imgArray[0].src = 'img/Gallery/poza0.jpg'; 
 

 
imgArray[1] = new Image(); 
 
imgArray[1].src = 'img/Gallery/poza1.jpg'; 
 

 
imgArray[2] = new Image(); 
 
imgArray[2].src = 'img/Gallery/poza2.jpg'; 
 

 
imgArray[3] = new Image(); 
 
imgArray[3].src = 'img/Gallery/poza3.jpg'; 
 

 
imgArray[4] = new Image(); 
 
imgArray[4].src = 'img/Gallery/poza4.jpg';

<button onclick='functieArray()' class='galleryButons'>Category 1</button> 
 
     <div id='pozeGallery'> </div>