1
JS: Random Numbers and comments:
Random Pictures:
So far, every time you click on a picture, you get the appropriate text, but the same two pictures pop up. We may want
random pictures to pop up. We can do this using arrays and random numbers.
First, create an array of images (like you did for the previous tutorial). It can be as long as you want (I made mine hold 6
images, or imgArray.length is 6) :
imgArray = new Array()
imgArray [0] = "kittysleeping.jpg"
imgArray [1] = "kittymetric.jpg"
imgArray [2] = "kittyfur-back.jpg"
imgArray [3] = "kittysit.jpg"
imgArray [4] = "kittysmiling.jpg"
imgArray [5] = "kittypanda.jpg"
Now to display any random image in the array, you can generate a random number between 0 and the length of the array,
then access that image in the array.
JavaScript allows us to generate random numbers within a range using:
randnum = Math.floor(Math.random() * range )
Quick explanation:
Math.random() generates a random number between 0 and 1 (e.g., 0.4).
We multiply this by a range to generate a random number between 0 and the range, so, for instance, if you wanted to
generate a random number between 0 and 9, you’d do the following:
Math.random() * 9
and the result would be 3.6
To get a whole number, and not a fraction, I’d truncate (chop) off the .6 with:
Math.floor(Math.random() * 9)
which is the same as saying:
Math.floor(3.6)
which gives us 3.
Finally, I need a box to put all this in, and I called my box randnum.
So I’m saying randnum = 3,
or
randnum = Math.floor(3.6),
or
randnum = Math.floor(Math.random() * 9)
where the value 9 is the upper value of the range of numbers in which I want to generate a random number (i.e., I want to
generate a random number between 0 and 9)
