Javascript: Random Link Generator

Posted by on February 17, 2013 • Filed Under Programming, Tutorials

This is a very simple code that you can use to generate random links. You can create a button, link, image with this function, which will randomly choose between the specified URLs to visit.

The first thing would be to create the array with the URLs There are two common ways to do this: The condensed array:

Or the regular array:

You can use any of these methods to create the generator, the next step is to create the function that will generate random links using the javascript Math.random method.

And that’s it! All that’s left is to add the HTML portion of the code, it can be a button, image, link, etc. I will use a link for this example:

This code can be modified to do many different things. For example, if you would like to display random quotes on your website, you could modify this code a little bit to make that happen. I will create a separate tutorial for that, though. Here’s the complete code from this tutorial:

If you have any questions, don’t hesitate to leave a comment.



12 Comments


  • avatar image

    Larbi Youbil

    Sep 12, 2013

    Reply

    hello! i have a text file with 100 links i want script that pick random link from text file that i uploaded on my site thankyou so every time i click on the button it picks a random link from the test file i uploded on site thankyou

    • avatar image

      Nicole

      Sep 23, 2013

      Reply

      I suggest you use jQuery to do this. You can use the .get function, then use data.split to get each item from the text file and then apply a similar approach to display a random item. I will try to write a tutorial on this as soon as possible.

  • avatar image

    Paul

    Sep 17, 2013

    Reply

    Hey, Thanks for this. But how can i center/bottom the link button. or even better. what would the code be to desplay different random videos. so you would press the button and in the window above it a random video would play. every time you press the button a different randome video would play above it Thanks Paul

    • avatar image

      Nicole

      Sep 23, 2013

      Reply

      You could try a similar approach using the video embed's HTML in an array and display it that way. I will try to write a tutorial about this as soon as possible. I've added it on my to-do list.

  • avatar image

    Amanda

    Nov 05, 2013

    Reply

    how do you do it for random image

    • avatar image

      Nicole

      Nov 07, 2013

      Reply

      It's basically the same way as the link, just change the array items to the image path/source you'd like to use. Then display the random function using the img tag. I will write a tutorial on this within the next few days. Thank you for your interest!

  • […] wrote a tutorial on generating random links with javascript some months ago. Recently, a person requested to show how to show this method but […]

  • avatar image

    MJ

    Jan 23, 2014

    Reply

    Hello, I am looking to do a research survey however the design is a bit complex. Is there anyway to randomly assign urls twice? What I mean is to random assign 2 links, and then randomly assign 12 links from the first and 3 links from the second. The reason why it is much more complicated is because there are hence different % of acquiring the resultant 15 links. Is there anyway to do this?

    • avatar image

      Nicole

      Jan 24, 2014

      Reply

      Could you explain this a little more? I would love to help but it would help me to have more information.

  • avatar image

    Ezgi Sener

    Apr 22, 2014

    Reply

    Hey! I have three websites and I want them to show up randomly, but I don't want them to repeate. So once one is shown, I don't want it to be shown again. Thanks in advanced!

  • avatar image

    R MACK

    Aug 14, 2014

    Reply

    took some work - but your code was simple enough i could tweak it around and added the image- really happy - thanks - i would like to send you free art. artist R Mack

  • avatar image

    Lis

    Feb 28, 2017

    Reply

    Hi! I love this tutorial. It helps so much. Are you still an active coder? I might need to hire one in a few months.

Post your comments