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

2

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

edited Sep 14, 2013 at 19:04

answered Sep 14, 2013 at 18:28

Ryan Ploetz

537 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bram Vanroy Over a year ago

I get this error: Uncaught TypeError: Cannot call method 'indexOf' of undefined . I don't quite understand where and how you defined limitsArray.

Ryan Ploetz Over a year ago

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

Bram Vanroy Over a year ago

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

1

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.

answered Sep 14, 2013 at 18:31

Lajos Arpad

80.5k42 gold badges124 silver badges235 bronze badges

Comments

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

0

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

edited Sep 14, 2013 at 19:13

answered Sep 14, 2013 at 18:54

nmaier

33.3k5 gold badges67 silver badges79 bronze badges

1 Comment

nmaier Over a year ago

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

0

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;

 }

answered Sep 14, 2013 at 18:29

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related