The Random Hyperlink: How It's Done

I do not pretend to be an expert on JavaScript. I created the following code by adapting random image scripts I had seen on various webpages. It works by creating a data structure called an array, essentially a container for several different variables. In this example those variables are the text strings of your hyperlinks: the web addresses you want the random link to choose between.

The Header Code

It is convenient to initialize this array (or arrays, each corresponding to a different link on the page) in the header of the document, instead of taking up space within the <body> tag with messy code blocks. The code you need to insert is fairly straightforward, shown here in context within an HTML file:

<script type="text/javascript">
	link = new Array; //creates array

<!––end1.html, etc represent the files
you wish your link to choose between––>

Of course, "link" is a completely arbitrary name, although I personally recommend using similar names if you have a single array. Names like "link1", "link2", and so on work well if you are going to have multiple random links on a page. Simplicity is always best in computer code.

The Body Code

Once the array is initialized, you simply have to use a fragment of JavaScript in the place of your regular <a href="foo/bar.html">LinkName</a>  tag. The code for that fragment is shown below; you may remove the line breaks to condense it into one line if you prefer your code that way, as long as semicolons and less- or greater-than signs are preserved.

<script language="JavaScript">
	random_num = (math.round((Math.random()*2)+1));
	document.write(">a href=\"" + link[random_num]
		+ "\">example</a>");

There are a few things to note about these code fragments. First, as mentioned above, as long as the basic formatting is preserved (semicolons, etc) you may condense it into one line. The actual code for the example link in this document is
<script language="JavaScript">random_num = (Math.round((Math.random()*2)+1)); document.write("<a href=\"" + link[random_num] + "\">example</a>");</script>
For more information on how to economize your code, see this additional document.

More important than that, this code and the header code must be modified to allow choosing from a different number of links (currently choosing between three). The modification to the top part is easy: simply continue adding link[X]="foo.html"; lines, incrementing X by one each time. That change must be reflected in the random number generator, however. To modify that portion of code, you must type random_num = (math.round((Math.random()*X)+1));, where X is equal to one less than the number of elements in the array. For example, if you need the link to select one of ten arrays, replace X with 9. Do not forget that "random_num" is an arbitrary variable name, either.

The Result

In the end, the actual use of random links is up to you. It takes more effort to create a document that would be enhanced, rather than damaged, by random linking; however, the end result could well be creative and interesting in the hands of a talented writer. The tools have been laid out for you.

>>> Continue to One-to-Many Links >>>

Stylesheets: Dark | Dark (No Links) | Simple Dark | Owen Style (Light) | Light Side | Plain Text Style