Javascript для i not print array

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, поэтому я прошу вашей pacience.

Заранее спасибо

Answer 1

попробовать:

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

Answer 2

Если вы хотите распечатать массив изображений не должны у вас есть HTML-код в цикле решений I номер изображения, например,

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

Попробуйте этот оптимизированный soln.

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();