javascript - 遍历图像数组并将其显示到HTML页面

我的JS代码遇到问题，希望大家能帮助我。我要做的只是将循环5张图像存储在数组中，然后将它们基本上发布到我的HTML页面中。

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>

最佳答案

您实际上需要将它们附加到DOM上才能显示出来。

使用appendChild()方法

在您的情况下：

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

还要注意，在代码示例中，您没有在任何地方调用functieArray，因此它可能无法正常工作。