Javascript 如何通过操作DOM从对象中提取图像

我正在构建一个小的JavaScript游戏，在这个游戏中，你随机挑选一张卡片，它显示卡片的标题、图像和描述。卡片是对象，我可以更改标题和描述，但不能更改图像。你可以在这里看到。非常感谢您的帮助

 <div class="container">

      <h2 id="tarotTitle">Tarot Card</h2>

      <img id="image" src="highPriestess.jpg" alt="A picture of a Tarot Card">

      <p id="tarotMeaning">Lorem, ipsum dolor</p>

    </div>

---

image.src而不是image.innerHTML。您正在使用innerHTML来更改图像元素的文本，但是您需要更改图像的src以定位源

const pullCard=document.getElementById（“pullCard”）；
const tarotTitle=document.getElementById（“tarotTitle”）；
const image=document.getElementById（“image”）；
const tarotMeaning=document.getElementById（“tarotMeaning”）；
//随机数函数
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
常数塔罗卡=[
{
卡片名称：“高级女祭司”，
图片：“高女祭司.jpg”，
描述：“我是一名高级女祭司”
},
{
卡片名称：“魔术师”，
图片：“theMagician.jpg”，
描述：“我是一名魔术师”
},
{
名片名：“皇后”，
图片：“theEmpress.jpg”，
描述：“我是皇后”
}
];
pullCard.addEventListener（'click'，e=>{
const currentCard=getRandomInt（3）；
//卡片标题
tarotTitle.innerHTML=tarotCards[`${currentCard}`].cardName；
//卡片图像
image.src=tarotCards[`${currentCard}`].image；
//卡片描述
tarotMeaning.innerHTML=tarotCards[`${currentCard}`].description；
});

要更改图像，您需要更新的属性，而不是其

innerHTML

，如：

// Card image
image.src = tarotCards[`${currentCard}`].image;

演示：

const pullCard=document.getElementById（“pullCard”）；
const tarotTitle=document.getElementById（“tarotTitle”）；
const image=document.getElementById（“image”）；
const tarotMeaning=document.getElementById（“tarotMeaning”）；
//随机数函数
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
常数塔罗卡=[{
卡片名称：“高级女祭司”，
图像：“https://picsum.photos/id/10/300/200",
描述：“我是一名高级女祭司”
},
{
卡片名称：“魔术师”，
图像：“https://picsum.photos/id/1009/300/200",
描述：“我是一名魔术师”
},
{
名片名：“皇后”，
图像：“https://picsum.photos/id/1015/300/200",
描述：“我是皇后”
}
];
pullCard.addEventListener（'click'，e=>{
const currentCard=getRandomInt（3）；
//卡片标题
tarotTitle.innerHTML=tarotCards[`${currentCard}`].cardName；
//卡片图像
image.src=tarotCards[`${currentCard}`].image；
//卡片描述
tarotMeaning.innerHTML=tarotCards[`${currentCard}`].description；
});
Pull卡
塔罗牌
Lorem，ipsum dolor

类似于：谢谢您的帮助！成功了！请考虑将答案标记为帮助未来用户。谢谢
// Card image
image.src = tarotCards[`${currentCard}`].image;