问题是除了文本问题之外的图像输出 - “未定义”。每个问题都必须使用 json 显示自己的图像。请帮帮我。结果应该是这样的(这些只是图片:c):
<div class="container">
<div id="loader"></div>
<div id="game" class="justify-center flex-column hidden">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Вопросы
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix">
Очки
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
</div>
</div >
<h2 id="question">What is the answer to this questions</h2>
<div id="qImg"></div> <!-- Тут проблема -->
<div class="choice-container">
<p class="choice-prefix">А</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">Б</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">В</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">Г</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
[
{
"question": "В каких случаях водители привлекаются к уголовной ответственности за нарушения Правил, повлекшие тяжкие последствия?",
"choice1": "Только при причинении смерти человеку",
"choice2": "При причинении смерти человеку или тяжкого вреда здоровью человека",
"choice3": "При наличии пострадавшего (вне зависимости от степени тяжести полученных им повреждений) или причинении крупного материального ущерба",
"choice4": "Только варианты 2 и 3",
"answer": 2,
"imgSrc": "image/1.jpg"
},
{
"question": "Какое расстояние проедет транспортное средство за время, равное среднему времени реакции водителя, при скорости движения около 90 км/час?",
"choice1": "Примерно 15 м",
"choice2": "Примерно 25 м",
"choice3": "Примерно 35 м",
"choice4": "Примерно 45 м",
"answer": 2,
"imgSrc": "image/2.jpg"
},
{
"question": "Какой неподвижный объект, не позволяющий продолжить движение по полосе, не относится к понятию «Препятствие»?",
"choice1": "Дефект проезжей части",
"choice2": "Посторонний предмет",
"choice3": "Неисправное или поврежденное транспортное средство",
"choice4": "Транспортное средство, остановившееся на этой полосе из-за образования затора",
"answer": 4,
"imgSrc": "image/3.png"
}
]
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 +">"; // Тут проблема
//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');
};
明白了,有点困惑,现在一切正常。如果您不深入研究其他细节,这就是答案(如果那样的话,qImg 已被替换)。但是感谢您的评论