How do I generate a random number within my javascript code?

Question

I'm using some 3rd party javascript to generate a slideshows within each of the posts on a blog. Each slideshow must have a unique ID to work properly. I figured the easiest way to do this would be to generate a large random number for each slideshow when it's loaded on the page.

Below is a snippet of the relevant parts of the code where POSTID represents the random number. Note that the same random number must be referenced in the div below the script.

<script language="javascript" type="text/javascript">
        $(function() {
        $("#POSTID").webwidget_slideshow_dot({
        slideshow_time_interval: '',
        slideshow_window_width: '320',
        slideshow_window_height: '480',
        slideshow_title_color: '#17CCCC',
        soldeshow_foreColor: '#000',
        });
        });
</script>

<div id="POSTID" class="webwidget_slideshow_dot">
        <!-- some content goes here -->
</div>

Any help would be greatly appreciated!

Thanks

Answer 1

Math.random() produces a pseudo-random number in the range [0, 1).

Returns a floating-point, pseudo-random number in the range [0, 1) that is, from 0 (inclusive) up to but not including 1 (exclusive), which you can then scale to your desired range.

If you want a large integer, in the range [0, 999999], you can scale and round. For example,

((Math.random() * 1e6) | 0)

will produce a pseudo-random integer in the range [0, 999999].

To attach your pseudo-random ID to the script, you might do:

<!-- Generate a random ID -->
<script>
var postID = 'post-' + ((Math.random() * 1e6) | 0);
</script>

<!-- Create a DIV with a generic ID. -->
<div id="POSTID">...</div>

<!-- Replace the DIV's ID with the generated ID -->
<script>$("#POSTID").attr('id', postID);</script>

<!-- Use the generated ID in a script. -->
<script>
(function() {
    $("#" + postID).webwidget_slideshow_dot(...)
})()
</script>

Note that JavaScript's Math.random() does not produce unguessable numbers . As long as you are using it as a GUID generator within a web-page this is fine, but if you send your ID to the server, you should not rely on people not knowing it for security.

Answer 2

A simple random number has a chance of repeating and breaking your logic. You can't create a "real" GUID with javascript but you can fake one using several random elements and making your architecture much more solid.

Answer 3

Why use a random number at all? Just use a counter (var counter = 0) and add 1 to it each time you need a new ID.

$("#POSTID-" + counter++)

Answer 4

Random number is one way, which is well covered in the other answers.

I'm using different approach to get unique values: the getTime() property of the Date object which returns the amount of milliseconds since 1/1/1970 thus will be unique on every page refresh:

<div class="webwidget_slideshow_dot">

And the JS:

$(function() {
    var now = new Date();
    var ts = now.getTime();
    $(".webwidget_slideshow_dot").each(function(index) {
        this.id = "webwidget_slideshow_" + (ts + index);
        $(this).webwidget_slideshow_dot({
           slideshow_time_interval: '',
           slideshow_window_width: '320',
           slideshow_window_height: '480',
           slideshow_title_color: '#17CCCC',
           soldeshow_foreColor: '#000'
        });
    });
});