Home / JavaScript / 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().

## 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.

## 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.