I have an array of objects which are questions. This is for a random question quiz. Basically, when one question is randomly selected, I thought all of the attributes would go with it (if "called" correctly). I am not sure how to display the image from the object when the question text (q) displays.
const questionBank = [
{
q: "This is question 1's text",
options:['1','2','3','4', '5'],
answer:4,
imgURL: 'http://drive.google.com/uc?export=view&id=googleDriveId',
},
{
q: "question 2 will go here",
options:['7','6','4'],
answer:0,
imgURL: 'http://drive.google.com/uc?export=view&id=differentDriveId',
}
function getNewQuestion(){
const question = document.querySelector(".question");
//set question text
question.innerHTML = currentQuestion.q;
//add image to question
//document.querySelector('.question').appendChild(img); (attempted, did not work)
//var img = new Image(); (attempted, did not work)
//img = document.createElement("img"); (attempted, did not work)
//img.src = document.querySelector('.imgUrl'); (attempted, did not work)
I think that is all the relevant code.
You were on the right track with creating a new img element, if you take a look at this post, you need to create a new image element.
on your last line, instead set image.src = currentQuestion.imgURL as you want the current questions imgURL property, then you can appendChild() your new image element!