(How) Can I select all elements in an array exept a random an element selected by math.random?

Question

Hi guys I am decently new to programming and this is my first post on stackoverflow, I am working on a small game that involves random cards to be drawn from an array.

Picture an array like this:

var cards = [document.getElementById("c1"),
         document.getElementById("2"),
         document.getElementById("3"),
         document.getElementById("4"),
        ];

Now I have the following code to generate the random variable from the array:

var randomNum = Math.floor((Math.random() * cards.length));

I use:

document.getElementById(randomNum);

to select the random variable.

Now I want to select all the other variables in the array and give them the following code so there will only be one card displayed on screen at a time:

.style.display: "none";

Is this even possible? Thanks a lot!

yes it is possible but i'd suggest in order to make it easier, hide them all by default and just show the selected one. for example, having a class that show elements, removing it from all the elements of the array at the start and then adding it to the selected element — saljuama, Dec 26 '15 at 20:22
Is it a duplicate? http://stackoverflow.com/a/32395535/1636522. Hope it can help anyway :-) — , Dec 26 '15 at 21:24
It is really close I have to say, but the biggest issue for me was the fact that I was not able of only one card being shown on screen at a time, but that's my bad should have been more clear about that. And Salvador that seems like a good idea I'll play around with that. Thanks a bunch for the quick reactions guys! — jasper, Dec 26 '15 at 22:08

score 0 · Accepted Answer · answered Dec 26 '15 at 20:50

You could do this best by assigning a common class to all card elements, and then set the display style to be empty or none depending on whether it matches:

document.getElementById('btn_rnd').addEventListener('click', function () {
    // get array of elements that have the "card" class:
    var cards = document.querySelectorAll('.card');
    // pick a random number:
    var randomNum = Math.floor((Math.random() * cards.length));
    // show only that card:
    for (var i = 0; i < cards.length; i++) {
        cards[i].style.display = (i == randomNum ? '' : 'none');
    }
});

<div id="c1" class="card">card 1</div>
<div id="c2" class="card">card 2</div>
<div id="c3" class="card">card 3</div>
<div id="c4" class="card">card 4</div>
<button id="btn_rnd">pick one randomly</button>

The above takes the random pick after a press on the button.

If you define an event handler like this button click, make sure to put that javascript near the end of the document, to make sure it finds the button (or whatever element you bind the event handler to).

score 0 · Answer 2 · answered Dec 26 '15 at 20:58

HTML :

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

<button id="play">Play !</button>

CSS :

.card {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 5px;
}

div {
  display: none;
}

Using pure Javascript :

(function() {

  var cards = document.getElementsByClassName('card');

  var play = document.getElementById('play');

  play.addEventListener('click', function() {
    cards[Math.round(Math.random() * 3)].style.display = 'block';
  });

})();

Using JQuery :

$(document).ready(function() {
    $('#play').click(function() {
    var card = $('.card').get(Math.round(Math.random() * 3));
    $(card).show();
  });
});

JSFiddle

Thank you for your quick response, I got this doesn't remove all the cards after you click the play button again. Your method is a lot cleaner than mine though. My problem is solved though:( — jasper, Dec 26 '15 at 22:16

score 0 · Answer 3 · answered Dec 26 '15 at 21:00

Selecting all cards:
document.querySelectorAll('#holder .card')
Selecting a single random card:
document.querySelector('#holder .card:nth-child(' + (1 + randomNum) + ')')
Selecting all cards except a single random:
document.querySelectorAll('#holder .card:not(:nth-child(' + (1 + randomNum) + '))')

To apply the style just loop through the result of the third selector:
for (var a = cards.length - 1; a >= 0; a--) cards[a].style.display = 'none';

(How) Can I select all elements in an array exept a random an element selected by math.random?

3 Answers3