Painted Pixels - Tutorials

Display Random Quotes with Javascript

This is a simple way to display random text, such as quotes on your web page using JavaScript. Each time the page is refreshed, the script will choose a quote to display on your page. It is similar to my Random Quote Script with PHP.

Step 1

Create your html page as normal.

Step 2

Where you want your Quote to appear copy and paste the following code:

var quoteArray = new Array();

</script>

What does this mean?

var quoteArray = new Array();

Sets up the quoteArray array.

quoteArray[0] = "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart. - Hellen Keller";

This is the first element of the quoteArray. You can put your own quote between " ";

If you wish to add more quotes continue adding lines like this:

quoteArray[3] = "He who asks a question is a fool for five minutes; he who does not ask a question remains a fool forever. - Chinese Proverb";
quoteArray[4] = "Use what talent you possess: the woods would be very silent if no birds sang except those that sang best. - Henry Van Dyke";
quoteArray[5] = "We are what we think. All that we are arises with our thoughts. With our thoughts, we make the world. - Buddha";

Notice how the format stays the same but the number in square brackets increases by one each time.

var quote=Math.floor(Math.random()*(quoteArray.length));

This randomly chooses one of the quoteArray elements.

document.write(quoteArray[quote]);

This prints out the randomly choosen quote.

You are now finished!

The complete code should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Random Quotes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<h2 align="center">Display Random Quotes with PHP</h2>

var quoteArray = new Array();

quoteArray[0] = "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart. - Hellen Keller";
quoteArray[1] = "Some cause happiness wherever they go; others whenever they go. - Oscar Wilde";
quoteArray[2] = "Money talks...but all mine ever says is good-bye. - Anon";
quoteArray[3] = "He who asks a question is a fool for five minutes; he who does not ask a question remains a fool forever. - Chinese Proverb";
quoteArray[4] = "Use what talent you possess: the woods would be very silent if no birds sang except those that sang best. - Henry Van Dyke";
quoteArray[5] = "We are what we think. All that we are arises with our thoughts. With our thoughts, we make the world. - Buddha";
quoteArray[6] = "He is able who thinks he is able. - Buddha";
quoteArray[7] = "Shoot for the moon. Even if you miss, you'll land among the stars. - Les Brown";
quoteArray[8] = "Failures are finger posts on the road to achievement. - C.S. Lewis";
quoteArray[9] = "You, yourself, as much as anybody in the entire universe, deserve your love and affection. - Buddha";

var quote=Math.floor(Math.random()*(quoteArray.length));
document.write(quoteArray[quote]);

</script>

</body>
< /html>

Now when you refresh the page, a new quote will be displayed. Enjoy!