我不打印数组的JavaScript

Question

我四处搜寻，没有找到可以应用到我的代码中的纯js解决方案。 这是一个可打印图像阵列的脚本，但目前仅可打印1个阵列。 html中的相关代码：

<div id="imgViewer"></div>
<script>
var imgViewerImages = ['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
</script>
<script src="services/imgViewer.js"></script>

在JS中：

function imgViewerPrinter(){
    var imgViewerTarget = document.getElementById('imgViewer');
    imgViewerImages.toString();

    for (var i=0;i<imgViewerImages.length;i++){
        imgViewerTarget.innerHTML = '<img src="' + imgViewerImages[i] + '">';
    }
}

window.onload = imgViewerPrinter();

我还是JS的菜鸟，所以请您耐心等待。

提前致谢

Answer 1

尝试：

imgViewerTarget.innerHTML += "<img src="' + imgViewerImages[i] + '">";

Answer 2

如果您不希望打印出图像数组，则可以在循环中添加HTML代码，例如，使我成为图像编号；

 for (var i=0;i<imgViewerImages.length;i++){
var imgViewerImages = ['img/imgViewer/' + [i] + '.png'];
  }

Answer 3

尝试这样的事情，因为您的代码一次又一次地重写了innerHTML，所以您获得了最后的迭代值。

下面的代码将只操作一次DOM，而不是在每个循环中操作DOM。

function imgViewerPrinter(){
    var imgViewerTarget = document.getElementById('imgViewer');

    var imgViewerImages_length = imgViewerImages.length;
    var image = '';
    for (var i=0;i<imgViewerImages_length;i++){
        image += '<img src="' + imgViewerImages[i] + '">';
    }
    imgViewerTarget.innerHTML = image;
}

Answer 4

试试这个优化的解决方案。

 var imgViewerImages =['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];

    function imgViewerPrinter(){

        var imgList=[];
        for (var i=0;i<imgViewerImages.length;i++){
            imgList.push('<img src="' + imgViewerImages[i] + '" />');
        }
         var imgViewerTarget = document.getElementById('imgViewer');
         imgViewerTarget.innerHTML = imgList.join('');
    }

    window.onload = imgViewerPrinter();