CODEWITHSUNDEEP
javascripthtml
Robin
Robin

Reputation: 109

How to implement a random image in Javascript?

with some help I now have a program that gives me a random order of poker cards.

Now I want my programm to show me images of those cards, in the specific random order. I've named the folders and images by the ranks and suits, to tell the programm which image to use, but for some reason, it doesn't work.

Here is my HTML and Javascript code:

var deck = [];

function setCards(){
  var suits = ["Spades", "Hearts", "Diamonds", "Clubs"];
  var ranks = ["Ace", "2", "3", "4", "5", "6", "7", "8", "9", "Ten", "Jack", "Queen", "King"];
  
  suits.forEach(function(suit){
     ranks.forEach(function(rank){
      var card = {};
      card.suit = suit;
      card.rank = rank;
      deck.push(card);
     });
      
    });
}

function newCard(count) {
  var remainingCards = 52 - count;
  var index = Math.floor(Math.random() * remainingCards);
  var card= deck[index];
  deck.splice(index,1);
  return card;
 }

function dealCards() {
  document.getElementById('hand').innerHTML = '<dt> Deck </dt>';
  setCards();
  
  for (var i = 0; i < 52; i++) {
  var card = newCard(i);
  document.getElementById('hand').innerHTML += new Image(335, 442);

  card.src = '/Game/'card.rank'/'card.suit'.png';
  }
}
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="CardGame.js"></script>
    <link rel="stylesheet" type="text/css" href="CardGame.css">
</head>
<body>
    <button type="button" onclick="dealCards()">Shuffle Deck</button>
    <hr/> 
    <img id = "hand">
</body>
</html>

My folders have exactly the names of the suits and the images of the ranks. For you, it is probably obvious what is wrong with my code, but I can't see it. If you got the mistake, could you please tell me?

Upvotes: 2

Views: 458

Answers (1)

itodd
itodd

Reputation: 2373

You have a few issues with your code. Firstly you need to concat the image src string properly '/Game/' + card.rank + '/' + card.suit + '.png'; you also have to insert the image correctly using appendChild()

Take a look at this working example:

var deck = [];

function setCards(){
  var suits = ["Spades", "Hearts", "Diamonds", "Clubs"];
  var ranks = ["Ace", "2", "3", "4", "5", "6", "7", "8", "9", "Ten", "Jack", "Queen", "King"];
  
  suits.forEach(function(suit){
     ranks.forEach(function(rank){
      var card = {};
      card.suit = suit;
      card.rank = rank;
      deck.push(card);
     });
      
    });
}

function newCard(count) {
  var remainingCards = 52 - count;
  var index = Math.floor(Math.random() * remainingCards);
  var card= deck[index];
  deck.splice(index,1);
  return card;
 }

function dealCards() {
  document.getElementById('hand').innerHTML = '<dt> Deck </dt>';
  setCards();
  
  for (var i = 0; i < 52; i++) {
  var card = newCard(i);
  var img = new Image(335, 442);
  img.src = '/Game/' + card.rank + '/' + card.suit + '.png';
  img.alt = card.rank + ' of ' + card.suit;
  document.getElementById('hand').appendChild(img);

  }
}
img {
  display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="CardGame.js"></script>
    <link rel="stylesheet" type="text/css" href="CardGame.css">
</head>
<body>
    <button type="button" onclick="dealCards()">Shuffle Deck</button>
    <hr/> 
    <div id = "hand"></div>
</body>
</html>

Upvotes: 1

Related Questions