如何通过我的函数传递第二个数组而不更改第一个数组

Question

我正在尝试在 js 测验中创建第二种游戏模式。我有一个游戏模式按预期运行，另一个数组中有另一组问题等待使用。然而，我对 js 非常陌生，并且正在努力如何在不更改第一组数据的情况下通过我的所有代码传递第二个数组。

我尝试了使用第二个数组的 if 语句，但其余函数停止工作。我尝试通过 createQuestion 函数传递数组，但它会在控制台中产生错误。比如

Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at createQuestion (script.js:184:35)
    at HTMLButtonElement.nextQuestion (script.js:236:5)

我想传递的第二个数组看起来像这样

let quizData2 = [
    {
        question: "assets/images/year/Brazil98-00.avif",
        answers: ["1997", "1999", "2002", "1995"],
        correct: "1999",
    },
    {
        question: "assets/images/year/Denmark-92.webp",
        answers: ["1991", "1990", "1995", "1992"],
        correct: "1992",
    },

当调用开始猜测衬衫年份函数时，我希望使用第二个数组数据集。

document.getElementById('guess-shirt-start-btn').addEventListener('click', startGuessShirtTeam);
document.getElementById('guess-year-start-btn').addEventListener('click', startGuessShirtYear);

// function to start the Guess the Shirt type game
function startGuessShirtTeam () {
    document.getElementById('game-choices-container').classList.add('hidden');
    document.getElementById('question-container').classList.remove('hidden');
    gameMode = 'shirt-quiz'
    modeOfGame(); 
    console.log(gameMode)
    createQuestion(quizData1);
    displayNumberOfQuestions();
};

function startGuessShirtYear () {
    document.getElementById('game-choices-container').classList.add('hidden');
    document.getElementById('question-container').classList.remove('hidden');
    gameMode = 'shirt-year'
    modeOfGame();
    console.log(gameMode)
    createQuestion(quizData2)
    displayNumberOfQuestions();
}

我可以从显示的两个数组中获取第一个问题，但我的后续检查答案和下一个问题功能停止工作。

function createQuestion (questionArray) {
    displayQuestionTitle();

    shirtImage.src = questionArray[questionNumber].question;
    
    questionArray[questionNumber].answers.forEach((o) => {
        document.getElementById('answer-button-1').innerText = questionArray[questionNumber].answers[0]
        document.getElementById('answer-button-2').innerText = questionArray[questionNumber].answers[1]
        document.getElementById('answer-button-3').innerText = questionArray[questionNumber].answers[2]
        document.getElementById('answer-button-4').innerText = questionArray[questionNumber].answers[3]
    });
    document.getElementById('answer-button-1').addEventListener('click', checkAnswer);
    document.getElementById('answer-button-2').addEventListener('click', checkAnswer);
    document.getElementById('answer-button-3').addEventListener('click', checkAnswer);
    document.getElementById('answer-button-4').addEventListener('click', checkAnswer);
};

我的下一个问题功能

function nextQuestion () {
    let allAnswers = document.querySelectorAll('.answer-btns');
    allAnswers.forEach((o) => {
        o.classList.remove('disabled')
    });
    if (questionNumber >= maxQuestions - 1) {
        displayQuizResult();
        return;
    }
    questionNumber++;
    clearCorrectAnswer();
    clearQuestionTitle();
    createQuestion();
    clearAnswers();
    showCurrentQuestionNumber();
}

查答题功能

function checkAnswer (e) {
    let userAnswer = e.target.textContent;
    if (userAnswer === questionArray[questionNumber].correct) {
        userScore++;
        finalScore++;
        e.target.classList.add("correct");
        showUserScore();
    } else {
        e.target.classList.add("incorrect");
        let correct = document.getElementById('correct-answer');
        let correctAnswer = document.createTextNode(`Sorry that's incorrect, the answer is ${questionArray[questionNumber].correct}`);

    correct.appendChild(correctAnswer);
    }

    let allAnswers = document.querySelectorAll('.answer-btns');
    allAnswers.forEach((o) => {
        o.classList.add('disabled')
    });
};

Answer 1

问题出在你的

nextQuestion

函数

function nextQuestion () {
    let allAnswers = document.querySelectorAll('.answer-btns');
    allAnswers.forEach((o) => {
        o.classList.remove('disabled')
    });
    if (questionNumber >= maxQuestions - 1) {
        displayQuizResult();
        return;
    }
    questionNumber++;
    clearCorrectAnswer();
    clearQuestionTitle();
    //----not pass any param here
    createQuestion();
    //----
    clearAnswers();
    showCurrentQuestionNumber();
}