I'm making a quiz app, and for the answers, I'm trying to display the name of the answers together with the images of the answer choices from my json data. However, I get this error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I try to set the image as:
image1.src = quiz[0].questions[question_id].answers[0].img_url;
Does anybody have any idea as to how I can make this work? It is worth noting that the image is displayed when the image tag is not nested in the label tag, and on its own in the div. You can uncomment this line of the html( <img id="ans1-img" src="" alt=""> ) to see it work
window.onload=function(){
const quiz = [{
questions: [
{
question_id : 0,
question_name: "Which rapper is Beyoncé married to?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Kanye West",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/kanye.webp",
"outcome": "outcome2",
},
{
"text": "Jay Z",
// "img_url": "../assets/quiz-imgs/jayz.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Lil Wayne",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/lilwayne.webp",
"outcome": "outcome1",
},
{
"text": "Drake",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/drake.jpeg",
"outcome": "outcome1",
},
]
},
{
question_id : 1,
question_name: "Before she married Prince Harry, Meghan Markle was on a TV show that ran from 2011 to 2019. What’s the name of that TV show?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Suits",
"img_url": "../assets/quiz-imgs/suits.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Game of Thrones",
"img_url": "../assets/quiz-imgs/got.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "You",
"img_url": "../assets/quiz-imgs/you.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome1",
},
{
"text": "90210",
"img_url": "../assets/quiz-imgs/90210.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
]
},
{
question_id : 2,
question_name: "Who did Forbes name the youngest “self-made billionaire ever” in 2019?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Rihanna",
// "img_url": "../assets/quiz-imgs/riri.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Kylie Jenner",
// "img_url": "../assets/quiz-imgs/kylie.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Mark Zuckerberg",
// "img_url": "../assets/quiz-imgs/mark.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome1",
},
{
"text": "Kim Kardashian",
// "img_url": "../assets/quiz-imgs/kimk.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560,c_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
]
},
]
}]
console.log(quiz[0].questions[0].answers[0].text)
let beginQuiz = true;
function processQuestion(question_id) {
// get question html tag and set question
const question = document.getElementById("question");
question.innerText = quiz[0].questions[question_id].question_name;
console.log("img1 url");
console.log(quiz[0].questions[question_id].answers[0].img_url)
// get and set answer choices and images to questions
const answer1 = document.getElementById('ans1');
answer1.innerText = quiz[0].questions[question_id].answers[0].text;
const image1 = document.getElementById('ans1-img');
image1.src = quiz[0].questions[question_id].answers[0].img_url;
const answer2 = document.getElementById('ans2');
answer2.innerText = quiz[0].questions[question_id].answers[1].text;
const image2 = document.getElementById('ans2-img');
image2.src = quiz[0].questions[question_id].answers[1].img_url;
const answer3 = document.getElementById('ans3');
answer3.innerText = quiz[0].questions[question_id].answers[2].text
const image3 = document.getElementById('ans3-img');
image3.src = quiz[0].questions[question_id].answers[2].img_url;
const answer4 = document.getElementById('ans4');
answer4.innerText = quiz[0].questions[question_id].answers[3].text
const image4 = document.getElementById('ans4-img');
image4.src = quiz[0].questions[question_id].answers[3].img_url;
}
if (beginQuiz) {
processQuestion(0);
}
console.log("length babbby")
console.log(Object.keys(quiz[0].questions[0]).length)
const next = document.getElementById('next');
var question_id = 0;
next.addEventListener("click", () => {
start = false;
if (question_id < Object.keys(quiz[0].questions[0]).length) {
question_id ;
processQuestion(question_id);
console.log(question_id);
}
})
}<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
<div>
<div id="question">
Question appears here
</div>
<section >
<label id="ans1">
<!-- answer 1 -->
<img id="ans1-img" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label id="ans2">
<!-- answer 2 -->
<img id="ans2-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label id="ans3">
<!-- answer 3 -->
<img id="ans3-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label id="ans4">
<!-- answer 4 -->
<img id="ans4-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<!-- <img id="ans1-img" src="" alt=""> -->
</section>
<div >
<button type="button" id="next" >Next</button>
</div>
</div>
</body>
</html>CodePudding user response：
The problem was when you were trying to set the label from javascript you replaced existing nested children with the label value. So all the nested children of label like img tag and input where completely removed from DOM. I think you wanted to append the label instead of removing the already present children nodes. You can do it as shown below using insertAdjacentText()
// get and set answer choices and images to questions
const answer1 = document.getElementById('ans1');
answer1.insertAdjacentText('beforeend', quiz[0].questions[question_id].answers[0].text);
const image1 = document.getElementById("ans1-img");
console.log(image1);
image1.src = quiz[0].questions[question_id].answers[0].img_url;