WebDevelopersNotes logo

home-icon Home / JavaScript / Random text display using JavaScript – 1

Random text display using JavaScript – 1

Random text display using JavaScript-1

This little JavaScript tip involves randomly displaying a text string from a list. And this is how we shall be going about it:

  • Create a new array and store the list of text strings in it
  • Use the JavaScript Math.random() method to obtain a random number
  • Convert the random number into an integer because the random() method throws a floating point (decimal) number between 0.0 and 1.0
  • Get the array element corresponding to the randomly generated integer.
  • Display the text string using document.write() or the JavaScript alert().

Sponsored Links

Creating the array that stores the text strings

var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";

Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). Our array r_text consists of seven elements. We, thus, need an integer between 0 and 6.

Generating a random number

var i = Math.random();

The variable i now contains a floating point (decimal) number between 0 and 1. We have to convert it to an integer between 0 to 6 so that it can be used as an index to retrieve the string from the r_text array.

i = 7 * i;
i = Math.floor(i);

We multiply the random floating point number (whose value is between 0.0 and 1.0) by 7 so that we get a number (again a floating point) that ranges from 0.0 to 7.0. The Math.floor() is used to round down this number. Thus, 0.345… would result in 0 and 6.893.. would be floored to 6.

The above three JavaScript statements can actually be combined into one:

var i = Math.floor(7*Math.random())

Displaying the text

The final step is to display the text through document.write() method.

document.write(r_text[i]);

We now place all this code between <script>-</script> tags.

<script language="JavaScript">
<!--
var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";
var i = Math.floor(7*Math.random())

document.write(r_text[i]);

//-->
</script>

You can also pack all this code in an external JavaScript file that is called from your web page. I would suggest that, unless its absolutely necessary, you should segregate all JavaScript code into an external file. This way you need to maintain only one file.

Click here to see how the code works!

When can you use this nice tip?

In the past, I have displayed a random quote or a randomly selected a testimonial on the web page. And this is how I go about it.
Most of my JavaScript code is placed in an external file (.js) that is called from desired web pages. I put all the testimonials or quotes that I want to display, in an array and then use the code above to have one displayed on the web page. And I can change this array to have a new set of testimonials or quotes, (which involves modifying only one file) and all web page are changed without additional effort.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Etch-A-Sketch iPad case

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The smartphone of today use 250,000 patents largest of any industry. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy