CODEWITHSUNDEEP
javascriptimageobjectdom
Deigan
Deigan

Reputation: 15

How to pull in an image from an object by manipulating the DOM

I'm building a small JavaScript game where you pick a random card and it displays the card's title, image and description. The cards are objects and I am able to change the title and description BUT NOT THE IMAGE. You can see it here https://angry-albattani-3bae62.netlify.com/. Thank you very much for any help!

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

Upvotes: 1

Views: 51

Answers (2)

palaѕн
palaѕн

Reputation: 73946

To change the image you need to update the src attribute of the image, not its innerHTML like:

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

Demo:

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>

Upvotes: 1

Colin
Colin

Reputation: 1215

image.src instead of image.innerHTML. You are using innerHTML which changes text of your image element, but you need to change your image src for the image to locate the source

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

Upvotes: 1

Related Questions