For that, all you need is a control to display your quote (in this example I have used a paragraph element) and a simple JavaScript script.

Let’s see how the HTML looks like:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Display randomly selected quote</title>

</head>

<body>

<div>

<p id=”quoteWrapper”></p>

</div>

</body>

</html>

Now, the script:

<script type=”text/javascript”>

 

var Quotes =

{

getRandomQuote: function()

{

var quote = [];

quote[0] = “When you have given nothing, ask for nothing.”;

quote[1] = “Good habits result from resisting temptation.”;

quote[2] = “If you bow at all, bow low.“;

quote[3] = “Examine what is said, not him who speaks.”;

quote[4] = “Make your bargain before beginning to plow.”;

quote[5] = “Don’t make use of another’s mouth unless it has been lent to you.”;

quote[6] = “Seize opportunity by the beard, for it is bald behind.”;

quote[7] = “Be not afraid of growing slowly, be afraid only of standing still.”;

quote[8] = “Do not employ handsome servants.”;

quote[9] = “Do not remove a fly from your friend’s forehead with a hatchet.”;

 

var maxLength = quote.length;

var position = Math.floor(Math.random() * maxLength);

return Quotes.displayQuote(“quoteWrapper”, quote[position]);

},

displayQuote: function(ctl, quote)

{

ctl = document.getElementById(ctl);

ctl.innerHTML = quote;

}

};

 

Quotes.getRandomQuote();

 

</script>

In the getRandomQuote function will be created the array that will hold the quotes and finally will call the displayQuote function which will add the randomly retrieved quote from the array in the selected HTML element.

If you’d like to see it in action, here is the link –> Random Quote.

Note:
If you don’t know how it works, just consecutively refresh the page

Popularity: 22% [?]

Share This