0

I have a code to randomly display three elements by id without repeat that usually works. The current code displays three playing cards selected from 54 cards/html elements. At the moment it works properly most of the time, but sometimes it only returns two cards and much more rarely only one.I would like to improve it by always returning three. How would I modify the below code to do so?

Also, if I press the button that randomly displays three elements/cards twice or more, it keeps adding three cards with each subsequent click until the very many display and cards are exhausted. How would I modify the below code so that it would redo the function (randomly display another set of three cards in its place and hide the initial three from the first click).

I would like to keep the current code's functionality of selecting elements by id because it could be used to generate other multiple elements than playing cards.

CSS is set to: 

.cards {
    display: none;
}

And the code is:

var myarray = [
"#card1","#card2","#card3","#card4","#card5","#card6","#card7"...];
var numberOfCards = 3;

function getRandom() {
    for (var i = 1; i <= numberOfCards; i++) {
    var randomIndex = RandomDiv();
    $('.cards:eq('+randomIndex+')').fadeIn(900).css('display', 'inline-block');
    myarray.splice(randomIndex, 1);
 }
}
$('.btn').on('click', function() {
    getRandom();
});

function RandomDiv() {
    return Math.floor(Math.random() * myarray.length);
};

Thank you!

user8277761
  • 5
  • 4

1 Answers1

0

Here is a solution without a complete overhaul:

var myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
"#card7","#card8","#card9","#card10","#card11","#card12"];
var numberOfCards = 3;
$(".card").hide();

var previous = [];

function getRandom() {

   if(myarray.length<3){
       myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
              "#card7","#card8","#card9","#card10","#card11","#card12"];
   }
   
   for (var i = 1; i <= numberOfCards; i++) {
       var randomIndex = RandomDiv();
       previous.push(myarray[randomIndex]);
       $(myarray[randomIndex]).fadeIn(900);
       myarray.splice(randomIndex, 1);
   }
};

$('.btn').on('click', function() {
   for(k=0; k< numberOfCards; k++){
 $(previous[k]).hide(0);
   }
   previous = [];
   getRandom();
});

function RandomDiv() {
    return Math.floor(Math.random() * myarray.length);
};
.card{
  display: inline-block;
}

.btn{
  border: 1px solid
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Deal
</div>
<div class="card" id ="card1" >1</div>
<div class="card" id ="card2" >2</div>
<div class="card" id ="card3" >3</div>
<div class="card" id ="card4" >4</div>
<div class="card" id ="card5" >5</div>
<div class="card" id ="card6" >6</div>
<div class="card" id ="card7" >7</div>
<div class="card" id ="card8" >8</div>
<div class="card" id ="card9" >9</div>
<div class="card" id ="card10" >10</div>
<div class="card" id ="card11" >11</div>
<div class="card" id ="card12" >12</div>

All cards are initially hidden at the start so only fadeIn(900) is needed.

Remember that the array myarray is getting shorter in every deal, so you should return dealt cards to it when it runs out. This is now done inside the getRandom function.

Here is a jsfiddle

R. Schifini
  • 9,085
  • 2
  • 26
  • 32
  • The cards are already drawn in html with colors assigned i.e.: `
    10♥
    10♠
    J♦
    `. So there is no need to create a deck of cards or give them a color. What I would like to do is go from 0 cards displayed to three cards on click. On subsequent clicks, I would like those three cards to be removed, and have another three displayed in their place that are randomly selected from the full set of 54.     – user8277761 Jul 17 '17 at 06:11
  • I.e. as if I was just trying to show any three random elements with no repeat, and then redo that indefinitely on click with only three elements showing at a time. Which is essentially what I am doing except those elements happen to be cards. – user8277761 Jul 17 '17 at 06:23
  • Updated the answer to do the reshuffle, `fadeIn` and hiding – R. Schifini Jul 17 '17 at 13:50
  • Ok thank you! This works. For some reason it still returns only two cards for me very occasionally but still have to inspect code thoroughly. I may actually try another approach entirely though, because I've just noticed the code will only return numbers in low-to-high order, every time (my previous code did the same). Do you know why this would happen? – user8277761 Jul 17 '17 at 23:34
  • The cards are shown in order because that is how they are placed on the page. Remember that they are hidden and then shown, the order between them remains the same. If you get two cards, check if some id in the array does not match the id of a card. Please accept the answer if your problem was solved. – R. Schifini Jul 18 '17 at 01:20
  • Ok awesome. Answer accepted (sorry new to the site). As a follow up question in case you can answer, is there a way to randomize the order in which three cards are shown or generate the three cards without them being displayed in any particular order from the HTML? – user8277761 Jul 18 '17 at 02:01