0

I'm trying to randomize a gallery of images. The HTML contains only the images, the idea is to then get the array, shuffle it and add them to divs acting as thumbnails. I took the shuffling code from here (the Durstenfeld version): How to randomize (shuffle) a JavaScript array?

My code: 

var pics = document.getElementsByTagName("img");

//the Durstenfeld shuffle
for (m = pics.length - 1; m > 0; m--) {
    var k = Math.floor(Math.random() * (m + 1));
    var temp = pics[m];
    pics[m] = pics[k];
    pics[k] = temp;
}

//giving ID to each image and adding them to a thumbnail div
for (e = 0; e < pics.length; e++) {
    pics[e].id = e;
    var photo = document.getElementById(e);
    var parent_section = photo.parentNode;
    var new_div = document.createElement("div");
    new_div.classList.add("thumbnail");
    new_div.appendChild(photo);
    parent_section.appendChild(new_div);
}

The thing is, this works perfectly fine in IE, but in all of the other browsers I tried, the images are simply placed in the default order (the order in which they are written in the HTML). The shuffling itself should be correct so I'm sure there's something wrong with my implementation of it, but I can't figure it out.

Community
  • 1
  • 1
Pieter Wouters
  • 35
  • 1
  • 4
  • An HTMLCollection is live! Therefore, shuffling will work against the Html renderer, meaning your code to fail in most cases. You need to create a real array out of it! – Jonas Wilms Apr 16 '17 at 11:07

1 Answers1

0

Your Array isnt an Array. Do this:

var pics = Array.from(document.getElementsByTagName("img"));
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151