How do I show three divs by id randomly without repeat? For playing card shuffler and else

Question

I would like to show three playing cards created and styled in HTML and CSS randomly without repeat. Basically I would like the cards to be randomly selected by id and shown. I know that there are other methods of doing this (i.e creating the deck itself in Javascript) but I would prefer to find a way to show the elements of the HTML by id using Javascript as it could be repurposed for showing other html elements styled in css like images, text, or anything with an ID three at a time, or even more at a time. I would also like this to be an onclick event.

With the below code, I have tried to put the ids in an array, but when I run the code the text within the brackets is showing up on the page rather than the id'd elements themselves. This is also occurring on load rather than on click. Please note that the ellipses in the code are not in the code, they are just there to signify the remaining elements. I've done some thorough research to try and find a way to do this an tried many methods, but haven't found a way to show more than one element at once (most examples of seen use the getElementById method which only works for one). The methods I've seen for multiple show text elements from the array. Does anyone have an idea how to make the code work in the way I've specified, or an alternate idea?

HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href=style.css>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type"text/javascript" src="js/main.js"></script>
  </head>
    <div class="card">
      <div style="font-size: 24px" style="display; inline-block">       
        <div class="cards" id="card1"><span style="color: #C23B22">2♦</span></div>
        <div class="cards" id="card2"><span style="color: #C23B22">2♥</span></div>
        <div class="cards"id="card3">2♣</div>
        <div class="cards" id="car4">2♠</div>
        <div class="cards" id="card5"><span style="color: #C23B22">3♦</span></div>
        <div class="cards" id="card6"><span style="color: #C23B22">3♥</span></div>
        <div class="cards" id="card7">3♠</div>
        <div class="cards" id="card8">3♣</div>
        <div class="cards" id="card9"><span style="color: #C23B22">4♦</span></div>
        <div class="cards" id="card10"><span style="color:#C23B22">4♥</span></div>
        <div class="cards" id="card11">4♣</div>
        <div class="cards" id="card12">4♠</div>
        <div class="cards" id="card13"><span style="color:#C23B22">5♦</span></div>
        <div class="cards" id="card14"><span style="color:#C23B22">5♥</span></div>
        <div class="cards" id="card15">5♣</div>
        ...
      </div>
    </div>
    <input type="button" id="Button" value="Random" onclick="RandomDiv();" />
  </body>
</html>

Javascript/Jquery:

var myarray = ["card1","card2","card3","card4","card5","card6","card7","card8","card9","card10","card11","card12","card13","card14","card15"...];

var numberOfTestimonials = 3;

for (var i=1; i<=numberOfTestimonials; i++) {
  var randomIndex = RandomDiv(myarray);

  $('.card').append(myarray[randomIndex]);
  myarray.splice(randomIndex, 1);
}

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

See [Random number, which is not equal to the previous number](https://stackoverflow.com/questions/40056297/random-number-which-is-not-equal-to-the-previous-number) — guest271314, Jul 10 '17 at 04:14
first your span element are not closed properly as they don't have closing bracket ">".Second the append method you are using is not used to insert text. You should first select the item with specified id using $(selector). and then append it . — sagar, Jul 10 '17 at 04:25

score 0 · Answer 1 · answered Jul 10 '17 at 04:17

0

You can try something like this

var myarray =  $(".cards")

which will grab the elements correctly.

Give all your cards

display: none;

css and make them appear when you need it.

answered Jul 10 '17 at 04:17

SDhaliwal

174
6

score 0 · Answer 2 · answered Jul 10 '17 at 04:23

0

You are only appending the text from your card array. What you want is

$('.card').append(document.getElementById( myarray[randomIndex]));

answered Jul 10 '17 at 04:23

ControlAltDel

33,923
10
53
80

Ok awesome! I'm happy to say this worked, for some reason I thought `getElementById` could only get one element. However, all the elements are set to `display: none` in css so they aren't shown unless appended. Appending the elements doesn't change this (i.e. the three random elements do not show as the text from the array did previously). Do you know a way to modify the function (or another method) so the three random random cards (and only the three random cards) go from `display: none` to being shown (preferably by `display; inline-block`? – user8277761 Jul 10 '17 at 23:21

Rohan Kumar · Accepted Answer · 2017-07-10T04:41:17.973

0

You are appending only text from myarray index use the below line to append element like,

$('.card').append($('#' + myarray[randomIndex]));

Snippet,

var myarray = ["card1", "card2", "card3", "card4", "card5", "card6", "card7", "card8", "card9", "card10", "card11", "card12", "card13", "card14", "card15"];
var numberOfTestimonials = 3;

function getRandom() {
  for (var i = 1; i <= numberOfTestimonials; i++) {
    var randomIndex = RandomDiv();
    $('.card').append($('#' + myarray[randomIndex]));
    myarray.splice(randomIndex, 1);
  }
}
$('#Button').on('click', function() {
  getRandom();
});

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

.cards {
  display: inline-block;
  margin: 5px
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="card">
  <div style="font-size: 24px" style="display; inline-block">
    <div class="cards" id="card1"><span style="color: #C23B22">2♦</span></div>
    <div class="cards" id="card2"><span style="color: #C23B22">2♥</span></div>
    <div class="cards" id="card3">2♣</div>
    <div class="cards" id="car4">2♠</div>
    <div class="cards" id="card5"><span style="color: #C23B22">3♦</span></div>
    <div class="cards" id="card6"><span style="color: #C23B22">3♥</span></div>
    <div class="cards" id="card7">3♠</div>
    <div class="cards" id="card8">3♣</div>
    <div class="cards" id="card9"><span style="color: #C23B22">4♦</span></div>
    <div class="cards" id="card10"><span style="color:#C23B22">4♥</span></div>
    <div class="cards" id="card11">4♣</div>
    <div class="cards" id="card12">4♠</div>
    <div class="cards" id="card13"><span style="color:#C23B22">5♦</span></div>
    <div class="cards" id="card14"><span style="color:#C23B22">5♥</span></div>
    <div class="cards" id="card15">5♣</div>
  </div>
</div>
<input type="button" id="Button" value="Random" />

Also, you can make card array by prepending a # and use getUnique() answered by @Jeremy. The getUnique() will return an array of ids so you have to just append those ids in a single statement like $('.card').append($(getUnique(3)))

edited Jul 10 '17 at 04:41

answered Jul 10 '17 at 04:32

Rohan Kumar

40,431
11
76
106

Ok, thank you very much. I should have included my css, which has the cards at 'display: none'. The above code works in in that it selects three cards from the array. But it only works if I have all the cards being displayed already (i.e. 'display: inline block'). Is it possible to modify the above code so I would go from 0 elements being shown to three elements on click? – user8277761 Jul 10 '17 at 05:16
Yes, by making all `cards` hidden like `$('.cards').hide()` then show the 3 random cards only. – Rohan Kumar Jul 10 '17 at 05:20
Where in the code line would I put that? Separately or within the function it keeps the elements hidden and doesn't display on click. – user8277761 Jul 10 '17 at 06:29
In the getRandom Function `function getRandom() { $('.cards').hide(); for(...){...SHOW CARDS ELEMENTS HERE...} }` – Rohan Kumar Jul 10 '17 at 06:31
I tried ` function getRandom() { $('.cards').hide(); for (var i = 1; i <= numberOfTestimonials; i++) { var randomIndex = RandomDiv(); $('.card').append($('#' + myarray[randomIndex])); myarray.splice(randomIndex, 1); }` and all of the cards (those set to display in css and the three randomly appended) disappeared on click. I'm not sure if I fully understand. `for (...)` is meant to reference the code above right? Does `{...SHOW CARDS ELEMENTS HERE...} mean all ID elements and where does that go in the code line? I've tried a few things. How should the function look in full? – user8277761 Jul 10 '17 at 12:04
Change the for loop like, `for (var i = 1; i <= numberOfTestimonials; i++) { var randomIndex = RandomDiv(); $('.card:eq('+randomIndex+')').show(); }` – Rohan Kumar Jul 10 '17 at 12:07
Ok so with the code `var myarray = ["card1", "card2", "card3",,,]; var numberOfTestimonials = 3; function getRandom() { $('.cards').hide(); for (var i = 1; i <= numberOfTestimonials; i++) { var randomIndex = RandomDiv(); $('.card:eq('+randomIndex+')').show(); } } $('#Button').on('click', function() { getRandom(); });` all cards still display initially and on click all cards disappear. I am trying to show no cards initially and three on click. Any idea what I'm doing wrong? – user8277761 Jul 10 '17 at 22:53
Wouldn't I have set `display: none` for all elements/cards in css and use the function to show the three elements/random cards on click? I have tried some different ways but am still looking for a way to make the function do this. – user8277761 Jul 10 '17 at 22:57
I actually got it. I think that should be `'.cards` in your last comment. I set `display: none` in css and used `$('.card:eq('+randomIndex+')').css('display', 'inline-block';)` in the function instead of show (`$('.card:eq('+randomIndex+')').show();`). Thank you very much! This was very helpful. – user8277761 Jul 11 '17 at 11:00

AzDeveloper · Answer 4 · 2017-07-10T05:03:39.257

Here, I fixed your code:

var symbols = ['&spades;','&clubs;','&hearts;','&diams;'];
function RandomDiv() {
 for (i=1; i <= 15; i++) {
    document.getElementById('card' + i).innerHTML = random(10, 2) + symbols[random(3, 0)];
    document.getElementById('card' + i).style.color = randomColor('#C23B22', 'black');
  }
}

function random(max, min) {
var x = Math.floor((Math.random() * max) + min);
    return x;
}
function randomColor(color1, color2) {
  if (random(2, 1) == 1) {
    return color1;
  } else {return color2}
}

<div style="font-size: 24px; display: inline-block">
<div class="cards" id="card1">2♦</div>
<div class="cards" id="card2">2♥</div>
<div class="cards" id="card3">2♣</div>
<div class="cards" id="card4">2♠</div>
<div class="cards" id="card5">3♦</div>
<div class="cards" id="card6">3♥</div>
<div class="cards" id="card7">3♠</div>
<div class="cards" id="card8">3♣</div>
<div class="cards" id="card9">4♦</div>
<div class="cards" id="card10">4♥</div>
<div class="cards" id="card11">4♣</div>
<div class="cards" id="card12">4♠</div>
<div class="cards" id="card13">5♦</div>
<div class="cards" id="card14">5♥</div>
<div class="cards" id="card15">5♣</div>
</div>
<br>
<button onclick="RandomDiv();">Random</button>

Codepen: https://codepen.io/anon/pen/gRQOOY
If you have any question, feel free to ask!

How do I show three divs by id randomly without repeat? For playing card shuffler and else

4 Answers4