Preventing random numbers from showing twice in a row

Question

How do you prevent a random number from making an image show twice in a row in jQuery?

There are three arrays that fadeOut and fadeIn.

jQuery code and html code below:

<script type="text/javascript">
jQuery(

    function(){
        var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";

    $("#myBtn").click(

        function(){


            var drawNum = Math.floor(Math.random() * cardTitle.length);


            $("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });


            } //end click function
    ); //end click

}); //end jQuery container
</script>




<body>
  <img src="images/drawCard.jpg" id="showImage">
  <input type = "button" id="myBtn" value="Click Here to Pick a Card" />
  <h3 id="newTitle">Welcome to Madam Athena's Tarot Card Reading</h3>
  <p id="newDesc">Free your mind...</p>
</body>

`It must be done in jQuery and not JavaScript.` jQuery *is* JavaScript. If you're doing it in jQuery you are doing it in JavaScript. — Cᴏʀʏ, Mar 28 '14 at 18:04
If you want to show a list of things each exactly once in random order, you want to use a *shuffling* algorithm. A good example would be the [**Fisher-Yates shuffle**](http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle) algorithm. — mellamokb, Mar 28 '14 at 18:04

Venkat Reddy · Accepted Answer · 2014-03-28T20:46:18.677

If you dont want to show a random number twice in a row, declare a global variable and save recent random number.

compare new random number with recent random number, if both are equal, calculate random number again

for example

var previousRandomNumber = 0; // this should be outside of click function and be global to access

do {
drawNum = Math.floor(Math.random() * cardTitle.length);
}while (drawNum == previousRandomNumber)

previousRandomNumber =  drawNum ;

one other important thing to remember is javascript will not wait till do while is finished

so you should separate your shuffle logic in a separate function and call inside do while.

Full Working Example : http://jsfiddle.net/k4QH4/1/

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                shuffle(drawNum);
                }
            }while (drawNum == previousRandomNumber)


            previousRandomNumber =  drawNum ;

            } //end click function
    ); //end click


function shuffle(drawNum) {

$("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });
}

Let me know if you any further questions

[CHANGES BASED ON REQUEST IN COMMENT]

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                   $("h3").fadeOut(
                    function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                   }); 

                  $("p").fadeOut(
                   function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                  });         

                  $("img").fadeOut(
                   function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                  });
                }

            }while (drawNum == previousRandomNumber)

           previousRandomNumber =  drawNum ;




            } //end click function
    ); //end click

Just out of curiosity but it there away to do it without the plugin. Without using shuffle that is? — jessika, Mar 28 '14 at 19:33
Please understand shuffle is not a plugin, its your function and your code, i just separated it and called it shuffle. its always good to separate sub tasks as function. but answer to your question, yes we can do that without a function too but lil complicated. — Venkat Reddy, Mar 28 '14 at 20:31
I edited the posted and removed shuffle function. is that kool? — Venkat Reddy, Mar 28 '14 at 20:41
no problem,if they press button too fast fast they can be repetative sometimes. for that you can add flag untill the first request is processed (or) disable click button untill it finishes. I would suggest you to learn javascript basics first that will really help. Let me know if you need any help. — Venkat Reddy, Mar 28 '14 at 22:35

Preventing random numbers from showing twice in a row

1 Answers1