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

I tried to figure out how to include the tumblr {PostID} but I was unable to figure out how to get tumblr to properly recognize it within javascript. That would be the preferred way, if possible. — rrhoover, Oct 09 '11 at 05:43

Mike Samuel · Accepted Answer · 2011-10-09T21:00:06.870

5

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.

edited Oct 09 '11 at 21:00

answered Oct 09 '11 at 05:29

Mike Samuel

118,113
30
216
245

Why use the `|` instead of `parseInt()`? – lostyzd Oct 09 '11 at 05:36
Thanks, I didn't know about - "but not including 1 (exclusive)" – Rifat Oct 09 '11 at 05:47
@tostzyd, because `parseInt` is slower. On Firefox, in the micro-benchmark below, `|` performs 25% better, probably because it does not have the overhead of a function call and a number->string conversion. `var t0 = Date.now(), t1; for (var i = 0, n = 31415926.54, x; i < 1e6; ++i, ++n) { x = n | 0; } t1 = Date.now(); print(t1 - t0); var t0 = Date.now(), t1; for (var i = 0, n = 31415926.54, x; i < 1e6; ++i, ++n) { x = parseInt(n); } t1 = Date.now(); print(t1 - t0);` – Mike Samuel Oct 09 '11 at 05:50
@Rifta, yeah, if you use `|` as I did to round towards zero or use a small factor, then it matters a lot more than if you use `Math.round()` or another balanced rounding scheme with a large factor. – Mike Samuel Oct 09 '11 at 05:51
Thanks for the answer! Unfortunately, POSTID (the id of the div) isn't being replaced with postID (the random number). Any guesses why not? Note that I'm building this in tumblr in HTML mode. – rrhoover Oct 09 '11 at 06:12
@rrhoover, What are you seeing? It works for me once I fix a typo: replace `postId` with `postID`. – Mike Samuel Oct 09 '11 at 06:27
Looking at the code in firebug, it appears the id of the div is still "POSTID" and is not being set to the postID variable. My code looks like:
...
I'm setting the variable earlier in the code and I've verified that it's generating the variable correctly after doing a document.write(postID). – rrhoover Oct 09 '11 at 18:13
@rrhoover, Have you loaded jQuery properly? What is `typeof $`? – Mike Samuel Oct 09 '11 at 18:45
Yes, jQuery is loaded properly because it's required for the slideshow which is working. What do you mean by "typeof $"? (Sorry, I'm not very technical) – rrhoover Oct 09 '11 at 20:43
@rrhoover, I'm dumb. My code had a bug. `$("#POSTID").id = postID;` should have been `$("#POSTID").attr('id', postID);` – Mike Samuel Oct 09 '11 at 21:00

score 2 · Answer 2 · edited May 23 '17 at 11:48

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.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 09 '11 at 05:34

Paul Sasik

79,492
20
149
189

score 1 · Answer 3 · answered Oct 09 '11 at 08:02

1

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++)

answered Oct 09 '11 at 08:02

Jack

9,448
3
29
33

score 0 · Answer 4 · answered Oct 09 '11 at 08:10

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'
        });
    });
});

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

4 Answers4