Need to randomize an array with jquery and display a different item each time

Question

I'm trying to randomize an array of div classes and then fade in different divs (facts) each time a button is clicked. However, what I can't work is how to display a completely different div each time, so that a div is not repeated on click.

My current code is:

$(document).ready(function () {

    var facts = Array('.fact1', '.fact2');

    $(document).delegate('a.eggbutton', 'click', function () {

        $(fact).fadeOut('slow');

        var fact = facts[Math.floor(Math.random() * facts.length)];

        $(fact).fadeIn('slow');

    });

});

Is your problem that exist the possibility of showing the same div 2 or more times in a row with this approach? — Claudio Redi, Jun 12 '13 at 12:08
Looks like $(fact).fadeOut('slow'); here fact always undefined, no?! — A. Wolff, Jun 12 '13 at 12:10

BeNdErR · Accepted Answer · 2013-06-12T13:00:52.513

3

hope this helps: http://jsfiddle.net/AMmwL/6/

code

function randomFact(){
    var factsArr = $(".fact");
    $(".fact").hide("slow");
    var rnd = Math.floor((Math.random()*(factsArr.length-1)));
    $(factsArr[rnd]).show("slow");
}

edited Jun 12 '13 at 13:00

answered Jun 12 '13 at 12:15

BeNdErR

17,471
21
72
103

+1 for different approach but you can directly show the item with index why do you need the id. $(factsArr[rnd]).show() should work or factsArr.find() with index selector. – Onur Topal Jun 12 '13 at 12:21
1

@BeNdErR -1 +1 = 0. What's the point of those trailing operations? – Candide Jun 12 '13 at 12:29
That is a problem. If `random()` returns `1`, then `rnd` will be out of the array's bounds. – zsawyer Jun 12 '13 at 12:45
This should solve it: `var rnd = Math.floor(Math.random()*(factsArr.length-1));` – zsawyer Jun 12 '13 at 12:51
No, still out of bounds, please note my comment above. – zsawyer Jun 12 '13 at 12:54
1

this is a nice bit of code but it still doesn't prevent items from repeating on click – Andrew Charlton Jun 12 '13 at 12:56
you could add a class for the active div, then when button is clicked, get the active div id and check if the random number is equal to the previous div index (in the array) – BeNdErR Jun 12 '13 at 13:01
Great, I will do that. Thanks for taking the time out to help me on this! – Andrew Charlton Jun 12 '13 at 13:04

score 2 · Answer 2 · answered Jun 12 '13 at 12:10

I think your problem is when you show a div you are not hiding it when showing the other one. You did try doing it by $(fact).fadeOut('slow'); but as fact is local variable it won t work as you expected.

as a first soluyion you can define it in global scope like window.fact = ''

or also add class when showing to div and next time you are showing another div just hide it like below

$(".visibleDivClass").fadeOut('slow').removeClass("visibleDivClass");
...YOUR CODE...
$(fact).fadeIn('slow').addClass("visibleDivClass");

I write it according to your question but to be honest the approach of bender's is more correct, of course if it fits your situation e.g if you can give all of them same class and different id and you only want to display divs. — Onur Topal, Jun 12 '13 at 12:19

score 1 · Answer 3 · answered Jun 12 '13 at 12:39

One way to guarantee that you will not generate the same value twice is to keep a log of the last generated value and generate another one if the same value is generated. Simply:

$(document).ready(function () {

    var facts = Array('.fact1', '.fact2');

    var currentValue = 0;

    $(document).delegate('a.eggbutton', 'click', function () {

        $(fact).fadeOut('slow');

        var newValue = 0;

        while(newValue == lastValue){
            newValue = Math.floor(Math.random() * facts.length);
        }
        currentValue = newValue; 

        var fact = facts[currentValue];

        $(fact).fadeIn('slow');
    });
});

This will guarantee that the same fact is not displayed twice and the uniform random generator will guarantee a mostly uniform distribution.

score 0 · Answer 4 · edited May 23 '17 at 11:50

What about doing something like:

var arrayIndex = 0;

$(document).ready(function() {

    var facts = Array('.fact1','.fact2');

    $(document).delegate('a.eggbutton', 'click', function(){ 

    $(fact).fadeOut('slow');

    arrayIndex++;
    if (arrayIndex % facts.length == 0) shuffle(array);

    var fact = facts[arrayIndex % facts.length];

    $(fact).fadeIn('slow');

});

I assume you can find a suffle method for javascript but one can be found here:

How can I shuffle an array?

A problem with this approach is that you can still get the same "random" number after a shuffle but you can further randomize it by doing (pseudo-code follows):

while (randomNumberForIndexBeforeShuffle == randomNumberForIndexAfterShuffle) {
   arrayIndex++;
   re-calculate randomNumberForIndexAfterShuffle
}

Obviously I scribbled some code quickly and I expect there will be a bug or so. You get the idea though - thats the point. EDIT: Make sure you write a shuffle function — Yannis, Jun 12 '13 at 12:19

Need to randomize an array with jquery and display a different item each time

4 Answers4