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: 16% [?]
SEO MegaCorp news blog is dedicated to provide tips, tricks and latest news around the industry that one might miss. We're a SEO company which is based in India, which is dedicated only to serve the clients with thier full satisfaction...
8 Users Responded in " Display Random Quote Using JavaScript "
Very interesting script Costin, thanks for putting it up for everybody.
I’m glad you like it.
Nice script Costin.
Hi, great script, but how can it be made to trigger from a link on the same page?
I thought I’ might find out from your link
“here is the link –> Random Quote”
but this launches a new page.
Do I take “Quotes.getRandomQuote()” out of the script and do
onclick=”Quotes.getRandomQuote()” ?
yeap,
display random quote
note that you have to return false to prevent the page from being posted back.
arghhh… it made my example look like a live link…
let’s try again:
display random quote
Hi. This looks good.
Is there a simple way to select part of the text (or preferably add a source text/author name with its own text style) to be a link, which directs the user to an external URL.
For example: random quote is some words from a speech. The link (author’s name) directs user to a web page with the entire speech.
That should be no problem.
All you have to do is to format how the quote and the link are displayed. This is mostly a matter of css.
Example:
Change this:
quote[0] = “When you have given nothing, ask for nothing.”;
to:
quote[0] = ‘[span class='text']When you have given nothing, ask for nothing.[/span][a href="your-url"]author name[/a]‘;
and that should do it.
Leave A Reply Here