Return a random number inside a loop in JS but never the same

Question

This question has been asked a couple of times, but never exactly how I need it. I'm trying to do something like this: I have a fixed number of spans and I want to give every one of them a font size between 10px and 46px. Some can have the same value! Decimals are allowed (but I'm guessing useless because browsers handle "sub-pixels" differently (I am told)). Apart from that, I want a random value between 0 and 100 for left and top properties, but these values can never be the same!

I got this far: (borrowed from here on SO), but sometimes values overlap.

function randomFromInterval(from,to) { return Math.floor(Math.random()*(to-from+1)+from); } $("#question-mark-wrapper > span:not('.the-one')").each(function() { $(this).css({ "font-size": randomFromInterval(10,36) + "px", // Can be the same value twice "left": randomFromInterval(0,100) + "%", // Cannot be the same value twice "top": randomFromInterval(0,100) + "%", // Cannot be the same value twice }); });

just take an array with values from 0 to 100, shuffle the array and take the first N you need in order. — BrokenGlass
– BrokenGlass, Commented Sep 14, 2013 at 18:27

Ryan Ploetz · Accepted Answer · 2013-09-14 19:04:14Z

You'll need to create an array that contains the values that you have already used from your random function outside that function scope. I'd do something like this below (not tested). And you would pass in to the limitsArray the variables that you don't want the random to return. So you would want to push any returned random var to limitsArray before calling it again.

var usedNumbers = new Array(); function randomFromInterval(from, to, limitsArray) { var randomNumber = Math.floor(Math.random()*(to-from+1)+from); if ( limitsArray.indexOf(randomNumber) != -1 ) return randomNumber; else randomFromInterval(from,to,limitsArray); } var randomNumber = randomFromInterval(0,100,usedNumbers); usedNumbers.push(randomNumber);

I get this error: Uncaught TypeError: Cannot call method 'indexOf' of undefined . I don't quite understand where and how you defined limitsArray.
its an argument into the function so you would create that outside the scope of the function to track it. So outside that function create an array like var usedElements = new Array(); The pass that into the function. Then every time you get a random var back, do a push into that usedElements array like usedElements.push(<FOO>);
Could you please elaborate on this in your post, I'm really stuck and am not experienced enough with arrays to do this. Thank you for your effort.

Lajos Arpad · Accepted Answer · 2013-09-14 18:31:22Z

Create an array of 100 elements, like this:

var myArray = []; for (var index = 0; index < 101; index++) { myArray[index] = index; } //... function randomize(maxIndex) { var index = randomizeMyNumber(maxIndex); var returnValue = myArray[index]; myArray[index] = myArray[maxIndex]; return returnValue; }

After each call of randomize, subtract one of your maximum index and you have achieved your desired result.

nmaier · Accepted Answer · 2013-09-14 19:13:01Z

As @BrokenGlass said, you'll want a shuffled array. So first of all, here is an implementation:

/** * Create a shuffled array containing all values of [from, to] */ function createShuffledArray(from, to) { var i = to - from + 1; var a = Array(i); while (i) { var j = Math.floor(Math.random() * i--); var temp = isNaN(a[i]) ? (i + from) : a[i]; a[i] = isNaN(a[j]) ? (j + from) : a[j]; a[j] = temp; } return a; }

Now you'll want to create such shuffled arrays and pop from there:

var lefts = createShuffledArray(0, 100); var tops = createShuffledArray(0, 100); $("#question-mark-wrapper > span:not('.the-one')").each(function() { $(this).css({ "font-size": randomFromInterval(10,36) + "px", // Can be the same value twice "left": lefts.pop() + "%", // Cannot be the same value twice "top": tops.pop() + "%", // Cannot be the same value twice }); });

Sorry, I messed up my createShuffledArray when I attempted to make it more readable, making j non-uniform. Should be corrected now.

sudhansu63 · Accepted Answer · 2013-09-14 18:29:07Z

Keep a global variable array to keep track of the used Numbers.

 var Alredy_Used = []; function randomFromInterval(from,to) { var res= Math.floor(Math.random()*(to-from+1)+from); if(Alredy_Used.length < (from + to)) { if(Alredy_Used.indexOf(res) == -1 ) { Alredy_Used.push(res); } else { res = randomFromInterval(from, to) ; } } else { Alredy_Used = []; Alredy_Used.push(res); } return res; }

Collectives™ on Stack Overflow

Return a random number inside a loop in JS but never the same

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Related