循环遍历图像数组并将它们显示到 HTML 页面

Question

I'm facing issues with my JS code and I hope you guys can help me help me. All I want to do is loop 5 images stored in an array, and post them to my HTML page, basically.

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

You need to actually append them to the DOM for them to show up.

use the appendChild() method

In your case:

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

Also note that in your code sample you are not calling functieArray anywhere so it might not work.

Answer 2

To get the HTML of the Image objects, use Image#outerHTML . Then you can just loop through the array adding to the gallery's innerHTML .

Here is how you should fix your code (I'm going to use a loop for creating the Image objects):

 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

Try this ;)

 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>