matiasespina1991/shuffle_order_of_HTML_objects

Testing a code that will set a random order of certain objects with each refresh.

CSS

Function that shuffles the order of certain objects with the same class in an HTML page

Testing a way to achieve a lightweight javascript function that will set a random order of certain HTML elements on each refresh.

Set 'display: flexbox' on the elements to be shuffled.

.objectsClass {
display: flexbox;
}

Use the following script.

var objectsArray = document.getElementsByClassName('objectsClass');

    function shuffleOrder() {
    for (var i=0;i<objectsArray.length;i++){
        var randomNumber = Math.floor(Math.random() * objectsArray.length);
        elements[i].style.order = randomNumber;
        }
    }

shuffleOrder()

Demo:

URL: https://matiasespina1991.github.io/shuffle_order_of_HTML_objects/