javascript - 创建琐事测验 - 我对 for 循环功能有疑问

Question

(抱歉，我对编码很陌生)。我正在使用 jQuery 和 Javascript 为我的编码训练营创建一个问答测验。到目前为止，我已经得到了隐藏和显示的东西。现在我面临的障碍是当我尝试开始琐事测验时。

(我也会附上我的 HTML 以供引用)。

我遇到以下问题: 1.让我的问题正确显示(我发现只有写 $("#question").html(triviaArray[0].question); 才能让它显示 2. 获取我在 triviaArray 中创建的答案以显示在各个按钮中。 3.我需要创建一个for循环，但我不太确定我写得是否正确。我只需要 for 循环来循环遍历我创建的每个问题(及其各自的答案)。

如果我写 $("#question").html(triviaArray.question); 问题不会打印到屏幕上。

当我尝试做的时候 document.getElementById("answer").innerHTML += ""+ triviaArray.answers + ""; 它显示为未定义。我忘了我原来有什么，但它列为“对象对象”

这是我当前的 JS 脚本:

// ================================= GLOBAL VARIABLES ==========================================

var triviaArray = [
    {
        question: "How many times is 'f*ck' used in Pulp Fiction?",
        answers: ["a. 252 times", "b. 265 times", "c. 287 times", "d. 301 times"],
        correctAnswer: "b"
    },
    {
        question: "How many days did Bruce Willis work on the film?",
        answers: ["a. 28 days", "b. 42 days", "c. 14 days", "d. 18 days"],
        correctAnswer: "d"
    },
    {
        question: "This movie cost $8 million to make. How much of that money went to pay the actors' salaries?",
        answers: ["a. $6 million", "b. $4 million", "c. $5 million", "d. $8 million"],
        correctAnswer: "c"
    },
    {
        question: "When John Travolta was reviving Uma Thurman's character, which two board games are seen in the background?",
        answers: ["a. Game of Life, Operation", "b. Monopoly, Game of Life", "c. Candyland, Operation", "d. Scrabble, Operation"],
        correctAnswer: "a"
    },
];

var count = 0;

// user's guess is either right or wrong
var rightGuesses = 0;
var wrongGuesses = 0;
var unanswered = 0;

// define variable for the timer
var timer = 0;

// timer functionality 
var intervalID;

// // INVESTIGATE: should I have an index of questions and answers? If so,
// var indexQandA = 0; 

// then the game should start w/ 0.
// var score = 0; 

// create a results page at the end instead ("<h3>this is how many you've guessed correctly " + correct + "! </h3>")
// jQuery manipulates HTML!

// ========================================= PROCESS ==========================================

// GOOD HOUSEKEEPING: Make sure that HTML div tags are created and represented.
// Try to figure out where I can console.log stuff.

$(document).ready(function () {

    // List out everything that needs to be hidden before starting the quiz.
    $("#question").hide();
    $(".choices").hide();
    $("#answer").hide();
    $("#timer").hide();

    //  When I click the button. it should start the trivia quiz.
    $("#btn4").on("click", startQuiz);

    // create a function startQuiz() to start the game. 
    function startQuiz() {

        // the following represents the Results page... meaning I have to create a results page. 
        $("#startQuiz").empty();
        $("#right").empty();
        $("#wrong").empty();
        $("unanswered").empty();

        rightGuesses = 0;
        wrongGuesses = 0;
        unanswered = 0;

        // whatever I hid, now I have to show it: 
        $("#question").show();
        $(".choices").show();
        $("#answer").show();
        $("#timer").show();

        // The timer should start running.
        // If the timer starts running, the button should disappear and the question should display.
        // timer();
    };

    // function timer() {
    //     timer = setInterval(countdown, 10000 * 3)
    // };

    // create a function nextQuestion() and have a for loop to generate the next question.
    function nextQuestion() {

        $("#question").html(triviaArray[0].question);
        for (var i = 0; i < triviaArray.length; i++) {
            document.getElementById("answer").innerHTML += "<button>" + triviaArray.answers + "</button>";
        };

    };

nextQuestion();
});

这是我当前的 HTML(供引用，以防我的错误与命名约定有关):(别担心，我有 CSS、jQuery、Javascript 的正确链接)

    <div class="container"> 
        <div id="quiz">
            <h1>Pulp Fiction Trivia Quiz</h1>
            <hr style="margin-top: 20px"> 

            <div id="startQuiz">
                <button id="btn4">START QUIZ</button>
            </div>

            <!-- Question / Answer section -->
            <div id="timer">
                <h3>Time Remaining:</h3>
            </div>
            <div id="question"></div>
            <div id="answer"></div>

            <!-- Display correct answer -->
            <div id="message"></div>
            <div id="correctedAnswer"></div>

            <!-- Track Stats -->
            <div id="right"></div>
            <div id="wrong"></div>
            <div id="unanswered"></div>

            <div class="choices">
                <!-- <button id="btn0"><span id="choice0"></span></button>
                <button id="btn1"><span id="choice1"></span></button>
                <button id="btn2"><span id="choice2"></span></button>
                <button id="btn3"><span id="choice3"></span></button> -->
            </div>

            <hr style="margin-top: 50px">
            <footer>
                <p id="progress">Question x of y.</p>
            </footer>
        </div>

Answer 1

您正在包含所有数据的数组上进行循环，但您应该在问题答案的数组上进行循环。因此，对于第一个问题，您的代码应如下所示

    function nextQuestion() {

        $("#question").html(triviaArray[0].question);
        for (var i = 0; i < triviaArray[0].answers.length; i++) {
            document.getElementById("answer").innerHTML += "<button>" + triviaArray[0].answers[i] + "</button>";
        };

    };

这只适用于第一个问题。看了你的评论，你走的路是对的。也许您应该寻找更好的循环方式，例如 forEach。