CODEWITHSUNDEEP
javascriptjqueryrandom
markratledge
markratledge

Reputation: 17561

Random number isn't quite random

This function selects a random quote from the text file quotes.txt (each quote is delimited by a @) and displays it in the quotes div, such as <div class="quotes">quote shown here</div> on each page load.

But why does it sometimes skip a quote and show nothing in the <div>?

$.get('quotes.txt', function(data) {
    var quotes = data.split("\@");
    var idx = Math.floor(quotes.length * Math.random());
    $('.quotes').html(quotes[idx]);
});

Is it a problem with the random generator (which from my reading seems to be not very random)? Is there a way to make it only random select from a set number of quotes, i.e. 50? Is there a better way - maybe php - to generate a random number between 1 and 50?

quotes.txt looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit@ 
Fusce tincidunt, ante ut scelerisque@ 
Mauris lacinia, magna sed auctor pellentesque, diam nisl rutrum ligula@ 
Etiam tempor elementum augue, vitae cursus eros laoreet@ 
Donec imperdiet ullamcorper pharetra@

Edit 4/27/11 I ended up using a different function that doesn't have issues with showing blank lines. quotes.html is structured this way:

<div class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="quote">Lorem ipsum dolor sit amet, consectetur.</div>

Function:

$('div#quotescontainer').load('quotes.html',function(){
var $quotes = $(this).find('div.quote');
var n = $quotes.length;
var random = Math.floor( Math.random()*n );
$quotes.hide().eq(random).fadeIn();
});

Upvotes: 1

Views: 524

Answers (6)

markratledge
markratledge

Reputation: 17561

I ended up using a different function that doesn't have issues with showing blank lines. quotes.html is structured this way:

<div class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="quote">Lorem ipsum dolor sit amet, consectetur.</div>

Function:

$('div#quotescontainer').load('quotes.html',function(){
var $quotes = $(this).find('div.quote');
var n = $quotes.length;
var random = Math.floor( Math.random()*n );
$quotes.hide().eq(random).fadeIn();
});

Upvotes: 1

kennebec
kennebec

Reputation: 104850

You could remove empty items from the array

 var quotes = data.split("\@").filter(function(itm){return !!itm});

Upvotes: 0

Greg Hewgill
Greg Hewgill

Reputation: 994897

After splitting the file on @, the last item in quotes will probably be an empty string, since you've got a @ before the newline at the end of the file.

As for the perceived "randomness" of the random number generator, there's probably no problem here. Humans are notoriously bad at detecting whether a sequence is random or not.

Upvotes: 8

Chris Shain
Chris Shain

Reputation: 51344

I think the reason you may be getting blanks is that your array has a trailing blank. If the file ends in @, and you are splitting on @, the last item will be a blank string.

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38553

This is not a jQuery function, but rather a general JavaScript function. At least the code to create the random number. You are correct though that it is not very random. I ran into this issue, and found help on this blog post that helped me.

Upvotes: 0

Khoa Nguyen
Khoa Nguyen

Reputation: 1317

I think you should remove the at sign (@) at the end of your quotes.txt, because it will create an empty string in quotes array variable.

Upvotes: 1

Related Questions