如何修改Trivia游戏的JavaScript代码，从JSON获取图片URL并在HTML展示

问题背景 #

• 现有可正常运行的免费Trivia游戏，需为每个问题添加图片显示功能
• JSON问题数据包含media字段（存储图片URL，示例值：/img/trivia000.png）
• HTML中id="content1"的div用于展示图片，当前代码仅能渲染图片文件名文本，且导致游戏逻辑失效

问题根源 #

1. 未提前获取subject、level、content1这三个DOM元素，直接赋值会触发未定义错误，阻断游戏执行流程
2. 直接将图片URL赋值给content1.innerHTML，只会渲染纯文本而非图片元素

修复后的完整代码 #

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 game = document.getElementById('game');
// 新增获取缺失的DOM元素
const subject = document.getElementById('subject');
const level = document.getElementById('level');
const content1 = document.getElementById('content1');

let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuesions = [];

let questions = [];

fetch('/json/questions.json')
.then((res) => {
 return res.json()
})
.then((loadedQuestions) => {
questions = loadedQuestions;
startGame();
})
.catch((err) => {
console.error(err);
});

//CONSTANTS
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 50;

startGame = () => {
questionCounter = 0;
score = 0;
availableQuesions = [...questions];
getNewQuestion();
game.classList.remove('hidden');
loader.classList.add('hidden');
};

getNewQuestion = () => {
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
    localStorage.setItem('mostRecentScore', score);
    //跳转到结束页面
    return window.location.assign('/end.html');
}
questionCounter++;
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
//更新进度条
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;

const questionIndex = Math.floor(Math.random() * availableQuesions.length);
currentQuestion = availableQuesions[questionIndex];
question.innerHTML = currentQuestion.question;

// 修复后的主题、难度、图片渲染逻辑
subject.innerHTML = currentQuestion.subject;
level.innerHTML = currentQuestion.level;

// 创建img元素并设置属性
const imgElement = document.createElement('img');
imgElement.src = currentQuestion.media;
imgElement.alt = `Question ${questionCounter} related image`;
// 清空容器并添加图片元素
content1.innerHTML = '';
content1.appendChild(imgElement);

choices.forEach((choice) => {
    const number = choice.dataset['number'];
    choice.innerHTML = currentQuestion['choice' + number];
});

availableQuesions.splice(questionIndex, 1);
acceptingAnswers = true;
};

choices.forEach((choice) => {
choice.addEventListener('click', (e) => {
    if (!acceptingAnswers) return;

    acceptingAnswers = false;
    const selectedChoice = e.target;
    const selectedAnswer = selectedChoice.dataset['number'];
    const classToApply =
        selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';

    if (classToApply === 'correct') {
        incrementScore(CORRECT_BONUS);
    }

    selectedChoice.parentElement.classList.add(classToApply);

    setTimeout(() => {
        selectedChoice.parentElement.classList.remove(classToApply);
        getNewQuestion();
    }, 750);
});
});

incrementScore = (num) => {
score += num;
scoreText.innerText = score;
};

关键修改点 #

• 补全DOM元素获取：新增subject、level、content1的元素获取语句，避免未定义错误
• 图片渲染逻辑优化：通过document.createElement('img')创建图片元素，设置src为currentQuestion.media，再将图片添加到content1容器中，实现图片正常展示
• 容器清空处理：每次加载新问题时先清空content1，避免旧图片残留

内容的提问来源于stack exchange，提问作者Pat