Вывод изображения из json на тест, как дополнение к вопросу - PullRequest
0 голосов
/ 11 февраля 2020

Проблема в выводе изображения в дополнение к тексту вопроса - «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"
  },
  ...
]

1 Ответ

0 голосов
/ 11 февраля 2020

Я разобрался, немного перепутал, теперь все работает. Вот ответ (qImg был заменен).

image.innerHTML = "<img src='" + currentQuestion.image + "'>";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...