CODEWITHSUNDEEP
javascriptarrays
dult.np
dult.np

Reputation: 65

Javascript for i not printing array

I've searched around and found no pure js solution to my issue that I can apply to my code. It's a script that prints an array of images, but for now it only prints 1 array. Pertinent code in 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>

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

I'm still a noob is JS so I ask for your pacience.

Thanks in advance

Upvotes: 0

Views: 101

Answers (4)

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this,Because your code rewrite innerHTML again and again, so you get last iterated value.

Instead of manipulating DOM in every loop,Below code will manipulate your DOM one time only.

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;
}

Upvotes: 0

Anand Jha
Anand Jha

Reputation: 10724

Try this optimized 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();

Upvotes: 0

Luke14
Luke14

Reputation: 106

If you want to print out an array of images shouldnt you have your HTML code in the loop making i the image number for example;

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

Upvotes: 0

TWL
TWL

Reputation: 216

try :

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

Upvotes: 1

Related Questions