Проблема в выводе изображения в дополнение к тексту вопроса - «undefined». Каждый вопрос нуждается в собственном изображении с json. Помоги мне, пожалуйста. Я не могу правильно настроить. js, чтобы он выводил. json. Если вам удобнее, вы можете изменить путь к изображению на адрес ссылки. Буду благодарен за любую помощь. В результате нужно что-то вроде этого:
введите описание изображения здесь
введите описание изображения здесь
const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
const progressText = document.getElementById('progressText');
const scoreText = document.getElementById('score');
const progressBarFull = document.getElementById('progressBarFull');
const loader = document.getElementById('loader');
const qImg = document.getElementById("qImg");
let currentQuestion = {};
let acceptingAnswers = true;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];
let questions = [];
fetch("questions.json")
.then(res => {
return res.json();
})
.then(loadedQuestions => {
console.log(loadedQuestions);
questions = loadedQuestions;
startGame();
})
.catch(err => {
console.error(err);
});
qImg.innerHTML = "<img src="+ question.imgSrc +">"; // Here is the problem
//CONSTANTS
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 3;
startGame = () => {
questionCounter = 0;
score = 0;
availableQuestions = [...questions];
getNewQuestion();
game.classList.remove('hidden');
loader.classList.add('hidden');
};
<div class="container">
<h2 id="question">What is the answer to this questions</h2>
<div id="qImg"></div> <!-- Here is the problem -->
<div class="choice-container">
<p class="choice-prefix">А</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
...
</div>
</div>
[
{
"question": "Ask?",
"choice1": "Choice",
"choice2": "Choice",
"choice3": "Choice",
"choice4": "Choice",
"answer": 2,
"imgSrc": "image/1.jpg"
},
{
"question": "Ask?",
"choice1": "Choice",
"choice2": "Choice",
"choice3": "Choice",
"choice4": "Choice",
"answer": 2,
"imgSrc": "image/2.jpg"
},
...
]