A Simple Random Link JavaScript
Recently asked on Yahoo! Answers:
How do I make a link that takes the user to a random page?
I’ve seen a lot of sites that takes the user to a random page, like Wikipedia, or any site that does it, but I look at the link in the taskbar and it says something like www.example.com/example.html#, does the # have significance in something? Then how do I make a link that takes the user to a list of certain sites I have?
This is easily done in any Web programming language:
- Create an array of URLs you want to use as “random” elements.
- Generate a random number between 0 and one less than the length of the array.
- Select that array cell and echo it out as the href attribute of a link element.
For this demo, I will use JavaScript, since it doesn’t involve a server technology.
Step 1: Create An HTML Link With An ID Attribute
To begin, we need to create a standard HTML link with an ID attribute. I’ll give my link the id “randLink.”
<p><a id="randLink" href="http://www.dougv.com/blog/">Click here for a random link</a></p>
Note that I provide a default href attribute; that’s for people who aren’t using JavaScript.
Step 2: Create The JavaScript
As I noted before, our JavaScript function is very simple:
function setRandomLink() {
var randLink = document.getElementById('randLink');
var theLinks = new Array(
'http://answers.yahoo.com',
'http://www.imdb.com/name/nm0005453',
'http://www.funnycoolstuff.com/images/paris-hilton-sexy.jpg',
'http://www.thesuperficial.com/archives/2005/12/26/jenifer_love_hewitt_is_kind_to.html',
'http://www.youtube.com/v/8MrIHH2zdBc'
);
var arrSize = theLinks.length;
var randNo = Math.random();
randNo = Math.floor(randNo * arrSize);
randLink.href = theLinks[randNo];
}
We begin by using getElementById to select the link we want to randomly change.
Then, we populate an array with all the URLs we want to use. Note that the URL can be any kind of resource: A Web site, a specific page in a Web site, a specific image or video at a Web site — any URL that is publicly accessible can be used.
Notice also that we put each URL in single-quotes, and each — except for the last one — is delimited with a comma following the closing quote.
Our script is written in a way that allows us to enter as many URLs as we want in the array; there must be at least 1, but there can be hundreds, if you want, thanks to the fact that we simply ask the array to tell us how many elements it contains.
In fact, the more URLs you provide, the more “random” the link you will get from this script. (Computers can’t produce a truly random number, but they can very closely approach true randomness if they have enough data with which to work.)
We generate a “random” number between 0 and the number of items in the array. JavaScript will return this number as a fraction, so we round the number down to the nearest integer.
Zero, in this case, is an integer; therefore, it is statistically more probable the first URL in your array will be selected, and this is especially true the fewer URLs you use. That’s just a weakness of this method, sorry to say.
To finish, we set the href attribute of randLink to be whatever value is held in the array location corresponding to our random number.
And that’s all there is to it. You can see this script in action here:
http://www.dougv.com/demo/js_random_link/index.html
You can simply save this page to your computer, copy and paste the script on your page, and customize it as you like. I distribute code under the latest version of the Creative Commons Attribution / Share-Alike License.
