Using JavaScript for random page links

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
Q: I have gathered sayings of what Saints and others have said about the Eucharistic Lord. I want to have a random selection of the quotes like you have (see Random Quotes), but I don't know how you did the page. Does each meditation go on a different page? How does a particular page turn up when I click on the link? I don't get how I can make it random.
~ Cindy

First of all, each quote goes on a separate page. It's best to name each page in a sequential order, such as quote1.htm, quote2.htm, quote3.htm, etc.

After that, it gets tricky, because now you have to use JavaScript. You insert the JavaScript into the html codes. Here's how:

1. After the <head> tag, insert the following, substituting the sample URL with the full URL of the Random Links page.

<BASE HREF="http://www.domain.org/quotes.htm">

2. After the </head> tag and before the <body> tag, make a blank line and insert the the following Javascript (copy from here and paste it in):

<script language="JavaScript">
<!-- Hide this script from old browsers --

var links = new Array(10)
links[0] = "quote1.htm"
links[1] = "quote2.htm"
links[2] = "quote3.htm"
links[3] = "quote4.htm"
links[4] = "quote5.htm"
links[5] = "quote6.htm"
links[6] = "quote7.htm"
links[7] = "quote8.htm"
links[8] = "quote9.htm"
links[9] = "quote10.htm"
function go() {
var a = 1+Math.round(Math.random()*10)
var i = a
location = links[i]
}
// -- End Hiding Here -->

</script>

3. After the <body> tag, where you put the link your visitors will click on to get their random quote, use this (substituting the words "click here" with whatever is your linking text or image):

<a href="javascript:go()">click here</a>


I colored the number 10 red in two places, because this number will vary, according to how many pages of quotes you have. If you have 15 pages, change the number in both places to 15.

If you have more than 10 pages, you must add to the list of links:
After
links[9] = "quote10.htm"
add
links[10] = "quote11.htm"
and so on.

If you have less than 10 pages, you must delete some from the end of the list that you see in this sample.

Also, make sure that your quote pages are located in the same directory as the starter page that contains this Javascript. The starter page is the one with the link people click on to get the random quotes. See mine as an example. This is the only page you put the Javascript into.

   


Members:
You can help!

your questions
and how-to tips

on this topic

EXTRA TIPS

This is just one sample of working with a JavaScript. There are other types of randomizing you can do, such as playing random midi files, random graphics, random links and random text. Find the JavaScript that does what you want your website to do by searching through websites that give our free scripts.

Sources of free Java and JavaScripts:
Javascripts
Freecode

Code Generators
JavaScript Source
WebMonkey

If any of these links go bad, please report it!

 

Return to Directory of Tutorials or GNWDA home page