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

Question

我正在构建一个小型JavaScript游戏，您从中挑选一张随机卡片，它会显示卡片的标题，图像和说明。卡是对象，我可以更改标题和说明，但不能更改图像。您可以在这里https://angry-albattani-3bae62.netlify.com/看到它。非常感谢您的帮助！

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

app.js

const pullCard = document.getElementById("pullCard");
const tarotTitle = document.getElementById("tarotTitle");
const image = document.getElementById("image");
const tarotMeaning = document.getElementById("tarotMeaning");

// random number function
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

const tarotCards = [
  {
    cardName: "High Priestess",
    image: "highPriestess.jpg",
    description: "I am a high priestess"
  },
  {
    cardName: "the Magician",
    image: "theMagician.jpg",
    description: "I am a magician"
  },
  {
    cardName: "The Empress",
    image: "theEmpress.jpg",
    description: "I am an Empress"
  }
];

pullCard.addEventListener('click', e => {
  const currentCard = getRandomInt(3);
  // Card title
  tarotTitle.innerHTML = tarotCards[`${currentCard}`].cardName;
  // Card image
  image.innerHTML = tarotCards[`${currentCard}`].image;
  // Card Description
  tarotMeaning.innerHTML = tarotCards[`${currentCard}`].description;
});

Answer 1

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");

// random number function
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

const tarotCards = [
  {
    cardName: "High Priestess",
    image: "highPriestess.jpg",
    description: "I am a high priestess"
  },
  {
    cardName: "the Magician",
    image: "theMagician.jpg",
    description: "I am a magician"
  },
  {
    cardName: "The Empress",
    image: "theEmpress.jpg",
    description: "I am an Empress"
  }
];

pullCard.addEventListener('click', e => {
  const currentCard = getRandomInt(3);
  // Card title
  tarotTitle.innerHTML = tarotCards[`${currentCard}`].cardName;
  // Card image
  image.src = tarotCards[`${currentCard}`].image;
  // Card Description
  tarotMeaning.innerHTML = tarotCards[`${currentCard}`].description;
});

Answer 2

要更改图像，您需要更新src的src属性，而不是像image一样：

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");

// random number function
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

const tarotCards = [{
    cardName: "High Priestess",
    image: "https://picsum.photos/id/10/300/200",
    description: "I am a high priestess"
  },
  {
    cardName: "the Magician",
    image: "https://picsum.photos/id/1009/300/200",
    description: "I am a magician"
  },
  {
    cardName: "The Empress",
    image: "https://picsum.photos/id/1015/300/200",
    description: "I am an Empress"
  }
];

pullCard.addEventListener('click', e => {
  const currentCard = getRandomInt(3);
  // Card title
  tarotTitle.innerHTML = tarotCards[`${currentCard}`].cardName;
  // Card image
  image.src = tarotCards[`${currentCard}`].image;
  // Card Description
  tarotMeaning.innerHTML = tarotCards[`${currentCard}`].description;
});