Javascript: Randomizing

Javascript does many with little effort. One of my favourite thing to do is randomizing elements. It either serves you a specific purpose or you’re like me; you get bored with things easily.

The whole chunk of codes is as follows:

var img_array = ["https://localhost/images/image0.gif","https://localhost/images/image1.gif","https://localhost/images/image2.gif","https://localhost/images/image3.gif"];
var rimgr = Math.floor(Math.random()*img_array.length);
document.write("<img class='random_icon' src='"+img_array[rimgr]+"' alt='Random Gif' />");

and then there are 3 parts to this block. 1) the array 2) the variable that holds the function 3) the execution part

Part 1: The Array

The Array is a list of elements declared to be used later on. In this case, a list of images to be used in this script. In my example I’m creating a randomly loaded Gif as a footer decoration. You can have as many as you want.

Arrays can be declared in two ways either: img_array = new Array(“”); or img_array = [“”]; The latter is preferred (so the experts told me).

Each item in an array will automatically apply an index number to it, beginning from 0 (not 1). In this example, the numbers are 0, 1, 2, 3 (4 items).

Part 2: The Function

Next you can declare a variable which holds the function. Can we not use a variable? Yes, but messy to work with. You’ll see why.

In this variable the real working part is Math.floor() encapsulating Math.random(). What are these?

Math.random() generates numbers between 0 and 1. When you times that with the length of your array (i.e 4, because there are 4 images), you will get numbers between 0 and 3. However that is not gonna work correctly because Math.random() generates at 16 decimal points.

Therefore to solve this, you need Math.floor() to roundup the number by default at 0 decimal point. Unless you add the optional parameter, you can declare how many decimal points do you want the number to roundup to.

Makes sense? So, everytime you randomize and round the generated number, you will get between 0 and 3 (not 1 to 4). Try the script below; copy and paste in this website.

// Click on Run and see the output on the right. Try again and see a different number generated.
document.write(Math.floor(Math.random() * 4));

Part 3: Executing the Visual

This is the part where you decide where and how it will display the output. In this case, I am using document.write(). This internal function will tell the browser to write the selected image as define in the function. A basic understanding of HTML and CSS is required to make sense out of it:

<img class='random_icon' src='"+img_array[rimgr]+"' alt='Random Gif' />

The Javascript part of this expression is:


Which translates to: load the picture from img_array by inserting the generated (index number) in the square brackets [ ]. From there, you will get either img_array[1], img_array[2], img_array[3], img_array[4] . Do you see now why you need the rimgr variable? The whole content of that variable would have to be integrate within the document.write() function.

What Else to Do?

There are many things to randomize; from words, phrases, paragraphs, numbers, photos, colours, elements and other things you can imagine using your creativity. The idea is to lay out a list of things (using Array) and randomly select element from it. Neat huh?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.


© since 1998. Engine by Wordpress. Custom theme. Privacy Policy. Browse comfortably please. Borrowed media credits.