(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!

Answer 1

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).

Answer 2

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

Answer 3

• 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';