Cannot randomize HTMLCollection in Chrome and FF

Question

In the example below I try to colorize randomly the "group" elements of an SVG. Though there are problems running the snippet here, the code works as expected in Internet Explorer. In Chrome and FireFox the array is not randomized.

P.S. if I convert the HTML Collection into an array, the code works in all of the above browsers.

/*
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 *  https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

function clorize(){
 
 var svgGroups = document.getElementById("svgContainer").getElementsByTagName("g");
 
 shuffleArray(svgGroups);
 console.log(svgGroups);
 
 var red = 3;
 
 for (var i=0; i<svgGroups.length; i++){
  if (i<red){
  svgGroups[i].setAttributeNS (null, 'fill', "#991c1f"); 
  }
  else{
  svgGroups[i].setAttributeNS (null, 'fill', "#007777");  
  }
  
 }

}

<div id="svgContainer">
<svg xmlns="http://www.w3.org/2000/svg" style="display: block;" viewBox="0 0 100 100" width="100" height="100">
    <g fill="gray" transform="translate(0)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(0 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70 35)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(0 70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(35 70)">
        <rect width="30" height="30" />
    </g>
    <g fill="gray" transform="translate(70 70)">
        <rect width="30" height="30" />
    </g>
</svg>
</div>
<input type="button" onclick="clorize()" value="Colorize SVG">

Cannot randomize HTMLCollection in Chrome and FF

0 Answers0