Javascript for i not printing array

我搜索了四周，發現我的問題沒有純js解決方案，我可以應用於我的代碼。這是一個打印圖像數組的腳本，但現在只打印1個數組。在HTML 相關代碼：Javascript for i not printing array

<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。

在此先感謝

來源

2013-10-25 dult.np

數組聲明和用法在同一個文件中嗎？ –

該數組位於HTML中，然後從外部文件調用JS腳本。 –

'imgViewerTarget.innerHTML =' Abhitalks

嘗試：

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

來源

2013-10-25 11:25:50 TWL

工作正常。謝謝分配！雖然我會執行盧克14的建議。 –

如果你想打印出的圖像的數組不應該你做我的例子中，圖像編號的循環HTML代碼;

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

來源

2013-10-25 11:26:35 Luke14

幾乎...在這種方法中，它直接打印[i] .png。你需要使用「... /'+ i +'。png' – Nzall

我可以看到你的代碼更有效率。我可以用數組定義一個var，另一個使用數組。但是，這意味着要被那些不那麼科技傾向的人使用，其中所有的命名都可能更直觀。 –

是的，謝謝你。 – Luke14

嘗試這樣，因爲你的代碼一次又一次地重寫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; 
}

來源

2013-10-25 11:26:58

試試這個優化的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();

來源

2013-10-25 11:31:13 anand4tech

避免串聯字符串，因爲它需要更多內存。 – anand4tech

Javascript for i not printing array

回答

相關問題