In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in every single placeholder. What could be causing this issue?
Here's the JS code I'm working with:
(function pushImages() {
//array of images, better to store in an object ?
var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg","15030025.jpg"];
for (var i = 0; i < images.length; i++){
//push the image to the markUp
var newImage = images[i];
var markUp = ("<img src='img/" + newImage + "' class='img-responsive'</img>");
// get bootstrap place holder where to insert.after
var placeHolder = document.getElementsByClassName("col-md-3");
for (var h = 0; h < placeHolder.length; h++) {
//insert the markUp into the html after the placeholder
placeHolder[h].insertAdjacentHTML("beforeend", markUp);
};
};
})();If you'd like to see the full code on Codepen, click here:
http://codepen.io/chem85/pen/grQJvP?editors=1111
I'm trying to incorporate this functionality into a larger app for a popup image gallery slider. While I could use a jQuery plugin for this purpose, I'm determined to figure it out using just JavaScript, without external plugins. Any guidance would be greatly appreciated. Thank you in advance.