如何链接到HTML/JavaScript中具有可变名称的本地文件？
我有一个本地文件夹，里面有扑克牌的图像(每一张牌一张)，并有一个特定的命名模式：
2_of_clubs.png
2_of_diamond.png
2_of_hearts.png
2_of_spades.png
3_of_clubs.png
...由于包含图像的文件夹位于带有程序(html、css和js文件)的文件夹中，所以我可以使用"/Cards图像/ Jack _ of clubs2.png“引用一个特定的文件(例如，俱乐部的杰克文件)。
但是，在使用随机卡片生成器时，我需要根据函数的结果链接到文件(显示图像)(因此，需要在特定时刻显示的文件的名称是函数返回的变量)。该函数的代码如下：
//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
}如何打开该函数的结果是哪个文件名的图像？谢谢。
回答 3
Stack Overflow用户
发布于 2022-08-19 04:39:07
在您的函数中，您需要声明变量，例如使用const，除非您之前已经定义了它们。一旦有了变量，就可以使用模板文字来获取文件名。因此，我建议采取以下措施：
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;
}然后，您需要在html中找到图像并更改其源属性：
const img = document.querySelector('img'); //or give it an id and use that with #
img.src=Random_Card_Generator();Stack Overflow用户
发布于 2022-08-19 04:40:04
不需要每次调用函数时都声明数组。
您可以声明它们一次，并在所有其他函数中使用它们。
此外，还可以设置<img/>标记的<img/>属性以设置要显示的文件的名称。
请参阅下面的示例代码。
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>
Stack Overflow用户
发布于 2022-08-19 04:40:32
是的，您的Random_Card_Generator函数将返回一个包含card_rankings、card_suits索引的对象。首先，如果要在此函数之外创建卡片名，则需要访问函数范围外的两个数组，但为了方便起见，我将在此函数中进行访问。
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
}https://stackoverflow.com/questions/73411787
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号