WebDevelopersNotes logo

home-icon Home / JavaScript / Random Text Display Using JavaScript

Random Text Display Using JavaScript

Random Text Display Using JavaScript

Our aim is to randomly display a text string from a set. It involves the following steps

  1. Initializing an array
  2. Storing the text strings in that array
  3. Finding the length of this array
  4. Using the Math.random() to generate a random number
  5. Using the randomly generated number as index for retrieving a text string from the array.
  6. Displaying the text through an alert() box or document.write()
var text_st = new Array("String1", "String2", "String3", 
"String4", "String5", "String6", "String7", "String8", 
"String9", "String10");

var l = text_st.length;

var rnd_no = Math.floor(l*Math.random());


Click here for the result.

Thus, we first create our array and add elements to it – 10 in this case. To find the number of array elements, we employ the ARRAY_NAME.length property and store the value in a variable. The JavaScript Math.round() gets us a random number between 0.0 and 1.0 which we then multiply with the array length value. Lastly, the Math.floor() method rounds down the random floating point (decimal) number to an integer. This integer serves as the index number of the array and we display our randomly generated text.

Note: Array are zero-indexed, thus, we can use the value of variable l (length of the array) directly because we are using floor() to round down to an integer.

When to randomly display text on a web page?

I have used this code on several web sites to display a random testimonial from a set. So each time the web page loads a testimonial is selected and displayed at random. The code can also be used to display a random quote or a greeting.

One good thing about this is that my JavaScript array that stores the testimonials or quotes resides in an external file. If I want to update the set of testimonials to be displayed, I simply need to edit a single file.

Sponsored Links

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

Web browser funny images and jokes

Sponsored Links


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


Wingdings included since Windows 3.1 has been the center of a strange controversy. The dingbat font contains many popular and common shapes that can quickly be incorporated in documents. In the original font, typing the three letters 'NYC' in sequence, would display skull-cross bones, star of David and thumbs up sign. Some people interpreted as an antisemitic message and raised a big hue and cry over it. In later versions, the symbols were changed to eye, heart and skyline, which is like a hat tip to the famous "I ♥ NY" logo designed by Milton Glaser. [more...]

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