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>

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>

• javascript
• arrays
• image
• loops

• You want to add all images to #pozeGallery element right? – itzmukeshy7 Commented Mar 30, 2016 at 13:33
• Yes, I want to add all images to my page after I click a button. – Sergiu Turus Commented Mar 30, 2016 at 13:37

3 Answers 3

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.

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>

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>