Trying to add the image of the author of my quote with my random quote generator, but not sure how to go about doing that

JavaScript
1

I already added the html tags for where my image would go when I clicked on the random button generator. Here is the link to the rest of my code:https://codepen.io/noblegas/pen/bGbPJGV

To reiterate, I want it so each time I click on the button for a random quote, a picture of the author who wrote that quote would also appear. For those who already clicked on the codepen link to my code, should I added an image key value to my quotes arrays?

2

Where is the source of the image for the author? Do you have a list of links with the URLs pointing to the images?

When you have the URL you can add a new property named, for example ‘imageurl’, to that array of objects.

const quotes=[

    {
      quote:"It is, in fact, nothing short of a miracle .... rest of quote text.",
      author: "Albert Einstein",
      imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
    },
....

Then inside this function

btn.addEventListener('click',function(){ ...

use the new property imageurl to change the src= attribute of the the html element that holds your images.

3

so how would I put my link into my source images file?

4

[quote=“GeorgeCrisan, post:2, topic:318715”]
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%

So would my button function now look like this:

btn.addEventListener(‘click’,function(){

  let random=Math.floor(Math.random()*quotes.length);
  console.log(random);

 document.getElementById('quote').textContent=quotes[random].quote;

 document.querySelector('.author').textContent=quotes[random].author;
 document.querySelector('.quote-image-13').textContent=quotes[random].imageURL
});

})();