JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ul id="test">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<button id="shuffle">Shuffle</button>

JavaScript

function randomize(elems) {
 
    allElems = (function(){
    var ret = [], l = elems.length;
    while (l--) { ret[ret.length] = elems[l]; }
    return ret;
    })();
 
    var shuffled = (function(){
        var l = allElems.length, ret = [];
        while (l--) {
            var random = Math.floor(Math.random() * allElems.length),
                randEl = allElems[random].cloneNode(true);
            allElems.splice(random, 1);
            ret[ret.length] = randEl;
        }
        return ret; 
    })(), l = elems.length;
 
    while (l--) {
        elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);
        elems[l].parentNode.removeChild(elems[l]);
    }
 
}

    
    var btn = document.getElementById('shuffle');
    var elements = document.getElementById('test').getElementsByTagName('li');
    
    btn.onclick = function() {
        
        randomize(elements);
        
    };