Mobile Number Tracker
Trace Mobile Number Earn Money Online
© TechWelkin.com

Randomize HTML List: Display HTML List Items Randomly

JavaScript is beautiful!
Samyak Lalit | March 5, 2012 (Last update: September 22, 2017)

Samyak Lalit is an Indian author and disability rights activist. He is the principal author and founder of projects like TechWelkin, WeCapable, Viklangta, Kavita Kosh among many others.

I had a long list of URLs which I wanted to display on a webpage. Also, I wanted these URLs to always come in a random order. So, I needed a way to grab HTML list and then shuffle all the items in it. Initially, I was a bit at loss but then it turned out to be a very easy thing!

I found a randomizeList() JavaScript function.

The following JavaScript code can randomize an HTML list. The script can handle both Ordered List (OL) and Unordered List (UL) because it works on the LI items which are common to both types of list.

If you want to randomly display items in an HTML list every time the page loads you can calls the randomizeList() function when the onLoad event of the BODY tag occurs. And if you want to give control to the user, for example you want to randomize list on click of a button, then you can call the same function when onClick event of that button occurs.

JavaScript is beautiful!

You would just need to pass the id of the list that you want to randomize. The ID should be defined in the first line of the randomizeList() function given below:


function randomizeItems(items)
{
    var cached = items.slice(0), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function randomizeList()
{
var list = document.getElementById("myItems");
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = randomizeItems(nodes);
    while(i < nodes.length)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
list.style.display="block";
}

Make sure that you replace the myItems in randomizeList() function with the ID of your HTML list. This method gets hold of all the nodes under the provided list. These nodes are the LI elements. Then it simply uses the rand() function of JavaScript to shuffle these LI elements and sent back a randomly arranged stack. As you can see from this example, being able to traverse Document Object Model (DOM) is essential to develop many web application. Although I am not using createTreeWalker() method here but it is really easy way to traverse DOM tree.

I hope this tip was useful for you. Please let me know if you face any problem in this code. Thank you for using TechWelkin.

© TechWelkin.com

2 responses to “Randomize HTML List: Display HTML List Items Randomly”

  1. Exildur says:

    Very nice solution, I was able to use this effectively in my quiz app to randomly sort a re-arrange question on load.

  2. Roy Mohan says:

    Hi, I like this very much ( found it on Google)
    Question: Also possible to adjust??

    1) I have a long list (165 urls)
    2) I want to randomly show 15 of them in 3 columns ( no duplicates)

    Possible??
    How??

    Another Question: do you also program on WordPress/Woocommerce ?

Leave a Reply

Your email address will not be published. Required fields are marked *