Looping through images array and showing them to HTML page

Question

I'm facing issues with my JS code and I hope you guys can help me help me. All I want to do is loop 5 images stored in an array, and post them to my HTML page, basically.

JS:

function functieArray(){
    for (i = 0; i < imgArray.length; i++) {
        imgArray[i];
    }
    document.getElementById("pozeGallery").innerHTML = imgArray.src;
};

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img/Gallery/poza0.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'img/Gallery/poza1.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'img/Gallery/poza2.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'img/Gallery/poza3.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'img/Gallery/poza4.jpg';

HTML:

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
      <div id='pozeGallery'> </div>

Yes, I want to add all images to my page after I click a button. — Sergiu Turus, Mar 30 '16 at 13:37

dcohenb · Accepted Answer · 2016-03-30T13:37:39.580

1

You need to actually append them to the DOM for them to show up.

use the appendChild() method

In your case:

function functieArray() {
    var gallery = document.getElementById("pozeGallery");
    for (i = 0; i < imgArray.length; i++) {
        gallery.appendChild(imgArray[i]);
    }
};

Also note that in your code sample you are not calling functieArray anywhere so it might not work.

edited Mar 30 '16 at 13:37

answered Mar 30 '16 at 13:30

dcohenb

2,099
1
17
34

Alternatively, they could use `gallery.innerHTML += imgArray[i].outerHTML;` – 4castle Mar 30 '16 at 14:15
that is really a bad practice, it means the browser has to rebuild the DOM everytime you change something, take a look at: http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode – dcohenb Mar 30 '16 at 14:20
Yes, in my answer I appended all the `outerHTML` first to a string and then set the `innerHTML` all at once. Another solution from the answer you cited is to use `insertAdjacentHTML`. – 4castle Mar 30 '16 at 14:22

4castle · Answer 2 · 2016-03-30T14:33:29.207

0

To get the HTML of the Image objects, use Image#outerHTML. Then you can just loop through the array adding to the gallery's innerHTML.

Here is how you should fix your code (I'm going to use a loop for creating the Image objects):

var imgArray = [];
for (i = 0; i < 5; i++) {
    imgArray[i] = new Image();
    imgArray[i].src = 'img/Gallery/poza' + i + '.jpg';
}

function functieArray() {
    var images = imgArray.map(img => img.outerHTML).join('');
    document.getElementById("pozeGallery").innerHTML = images;
}

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
<div id='pozeGallery'></div>

edited Mar 30 '16 at 14:33

answered Mar 30 '16 at 13:40

4castle

32,613
11
69
106

I've updated my answer so that it isn't a duplicate of the others. Now it sets the `innerHTML` to the `outerHTML` of each `Image` object. – 4castle Mar 30 '16 at 14:14

score 0 · Answer 3 · answered Mar 30 '16 at 13:49

Try this ;)

function functieArray() {
    var gallery = document.getElementById("pozeGallery");
    for (i = 0; i < imgArray.length; i++) {
        gallery.appendChild(imgArray[i]);
    }
};
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img/Gallery/poza0.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'img/Gallery/poza1.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'img/Gallery/poza2.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'img/Gallery/poza3.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'img/Gallery/poza4.jpg';

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
      <div id='pozeGallery'> </div>

Looping through images array and showing them to HTML page

3 Answers3

Linked