Javascript for i not printing array

Question

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

The array is in the HTML, then the JS script is called from a external file. — dult.np
– dult.np, Commented Oct 25, 2013 at 11:26
imgViewerTarget.innerHTML = '<img should be imgViewerTarget.innerHTML += '<img — Abhitalks
– Abhitalks, Commented Oct 25, 2013 at 11:28

TWL · Accepted Answer · 2013-10-25 11:25:50Z

1

try :

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

answered Oct 25, 2013 at 11:25

TWL

2161 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dult.np Over a year ago

That worked. Thanks allot! Though I'll implement Luke14's suggestion.

Luke14 · Accepted Answer · 2013-10-25 11:26:35Z

0

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

answered Oct 25, 2013 at 11:26

Luke14

1062 silver badges16 bronze badges

2 Comments

Nzall Over a year ago

Almost... in this method, it literally prints [i].png. You need to use '.../'+i+'.png'

dult.np Over a year ago

I can see how your code is more efficent. I can define a var with the location and the other with the array. But this is meant to be use by less tech-prone people, in which naming everything might be more intuitive.

Anand Jha · Accepted Answer · 2013-10-25 11:31:13Z

0

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

answered Oct 25, 2013 at 11:31

Anand Jha

10.8k6 gold badges28 silver badges29 bronze badges

1 Comment

Anand Jha Over a year ago

Avoid concatenation of string because it takes more memory.

rajesh kakawat · Accepted Answer · 2013-10-25 11:32:14Z

0

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

edited Oct 25, 2013 at 11:32

answered Oct 25, 2013 at 11:26

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

Javascript for i not printing array

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related