Как вытащить изображение из объекта, манипулируя 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>

приложение. 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

Чтобы изменить изображение, вам необходимо обновить атрибут src для изображения , а не его 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;
});

<button id="pullCard">Pull Card</button>
<div class="container">
  <h2 id="tarotTitle">Tarot Card</h2>
  <img id="image" src="https://picsum.photos/id/10/300/200" alt="A picture of a Tarot Card">
  <p id="tarotMeaning">Lorem, ipsum dolor</p>
</div>

Answer 2

image.sr c вместо image.inner HTML. Вы используете inner HTML, который изменяет текст вашего элемента изображения, но вам нужно изменить ваше изображение sr c, чтобы изображение находило источник

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