How to link to local files with variable names in HTML/JavaScript?-CodePudding

I have a local folder with images of playing cards (1 image per 1 card) with a certain naming pattern:

2_of_clubs.png
2_of_diamond.png
2_of_hearts.png
2_of_spades.png
3_of_clubs.png
...

As the folder with images is located in the folder with the program (html, css, and js files), I can refer to one specific file (say, Jack of clubs) with "/Cards images/jack_of_clubs2.png".

However, as I use a random card generator, I need to link to the files (display images) based on the results of the function (therefore, the name of the file that needs to be displayed in a specific moment is a variable returned by the function). The code of the function is as follows:

//Returns a random card as an object with ranking and suit as attributes
function Random_Card_Generator(){
    card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"]
    card_suits = ["spades", "clubs", "hearts", "dimond"]
    Random_Card = {ranking: card_rankings[Math.floor(Math.random()*13)], suit: card_suits[Math.floor(Math.random()*4)]}
    return Random_Card
}

How could I open the image which file name will be the result of this function? Thank you.

CodePudding user response：

Inside your function you need to declare your variables, e.g. with const, unless you've defined them previously. Once you have the variables you can use a template literal to get the filename. So I propose to do the following:

function Random_Card_Generator(){
    const card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
    const card_suits = ["spades", "clubs", "hearts", "diamond"];
    const randomRank = card_rankings[Math.floor(Math.random()*13)];
    const randomSuit = card_suits[Math.floor(Math.random()*4)];
    const randomCard = `${randomRank}_of_${randomSuit}.png`;  //you can change this so that it fits the format of how your pictures are saved
    return randomCard;
}

Then you need to find the image in your html and change its source attribute:

const img = document.querySelector('img'); //or give it an id and use that with #
img.src=Random_Card_Generator();

CodePudding user response：

Yes, your Random_Card_Generator function would return a object containing indexes of card_rankings, card_suits. First of all, you need to have access to both arrays outside the functional scope if you want to do card name creation outside of this function but I will do it inside this function for my convenience.

function Random_Card_Generator(){
   card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"]
   card_suits = ["spades", "clubs", "hearts", "dimond"]
   Random_Card = {ranking: card_rankings[Math.floor(Math.random()*13)], suit: card_suits[Math.floor(Math.random()*4)]}
    
   const selectedCardFileName = `${card_rankings[Random_Card.ranking]}_of_${card_suits[Random_Card.suit]}.png`;
    
   return selectedCardFileName
        }

CodePudding user response：

No need to declare your arrays every time the function is called.

You can declare them once and use them in all the other functions.

Also, you can set the .src attribute of the <img/> tag to set the name of the file you want to display.

See my sample code below.

const card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
const card_suits = ["spades", "clubs", "hearts", "diamond"];
const cardPlacement = document.getElementById('cardChosen');
const imagePlacement = document.getElementById('cardImg');

//Returns a random card as an object with ranking and suit as attributes
function randomCardGenerator() {
  let randomCard = {
    ranking: card_rankings[Math.floor(Math.random() * 13)],
    suit: card_suits[Math.floor(Math.random() * 4)]
  }
  return randomCard;
}


function chooseNewCard() {
  let cardChosen = randomCardGenerator();
  let imageFilename = cardChosen.ranking   '_of_'   cardChosen.suit   '.png';

  cardPlacement.innerHTML = cardChosen.ranking   ' of '   cardChosen.suit;
  console.log(imageFilename);
  imagePlacement.src = imageFilename;
}

img {
  border: 2px solid black;
  margin: 5px;
  display: block;
}

<button onclick="chooseNewCard()">Generate Card</button>
<img id="cardImg" src="" height="100" width="60" />
<div id="cardChosen"></div>