為什么隱藏圖像的功能無法正常工作？

Question

我的代碼工作正常，直到我決定進行一些小改動，我想我不小心刪除了一些東西，因為我的控制台說當我已經定義了隱藏圖像時，隱藏圖像沒有定義。 我找不到我的錯誤一切正常：'（。我查看了我的隱藏圖像功能，似乎一切都是正確的。當我在html上加載時，錯誤似乎出現在用戶沒有進行選擇時運行函數遞減，所以當時間到達零時，它會顯示一個具有正確答案的圖像，並用它清除它並顯示下一個帶有可用選項的問題，但現在它只停留在if time = 0屏幕上並且不會繼續下一個問題。

  $(document).ready(function () {
    //set up object-array for questions
    var trivia = [
        {
            question: "On Drake & Josh, what's Megan favorite phrase?'",
            choices: ["Boobz", "Idiots", "Oh, really?", "Damn! Where are my 
    apples?"],
            rightChoice: 0,
            image: "assets/images/boobs.gif",
            background: "<img src='assets/images/90back.jpg'>"
        },
        {
            question: "What color lipstick does Spongebob use when he kisses 
    Mr. Krabs fake Millionth dollar?",
            choices: ["Magenta", "Stardust", "Coral Blue #Oof", "Blorange"],
            rightChoice: 2,
            image: "assets/images/spongebob-coral-blue.gif",
            background: "<img src='assets/images/90cart.jpg'>"
        },
        {
            question: "What thottie accessory was popular in the 90's, that 
    is currently popular today?",
            choices: ["chokers", "bandaids", "airpods", "tidepods"],
            rightChoice: 0,
            image: "assets/images/chokers.gif",
            background: "<img src='assets/images/90back.jpg'>"
        },
        {
            question: "During sleepovers, Mystery Date allowed girls to date 
    which sexy actor?",
            choices: ["Port", "James Franco", "Paul Rudd", "Chris Evans, Mr. 
    America"],
            rightChoice: 3,
            image: "assets/images/chris-evans.gif",
            background: "<img src='assets/images/90cart.jpg'>"
        },
        {
            question: "What was the SPICIEST band in the 90's?",
            choices: ["Madonna", "Hillary Clinton", "BackStreet Boyz", "The 
    Spice Girls"],
            rightChoice: 3,
            image: "assets/images/zig-a-zig-ha.gif",
            background: "<img src='assets/images/90back.jpg'>"
        }
    ];
    var rightAnswer = 0;
    var wrongAnswer = 0;
    var unansweredCount = 0;
    var time = 15;
    var intervalId;
    var userSelection = "";
    var selected = false;
    var running = false;
    var totalCount = trivia.length;
    var chosenOne;
    var triviaRand;
    var newArray = [];
    var placeHolder = [];

    //hide resetBtn until called
    $("#resetBtn").hide();
    //click startBtn button to start game
    $("#startBtn").on("click", function () {
        $(this).hide();

        displayTrivia();
        runTime();
        for (var i = 0; i < trivia.length; i++) {
            placeHolder.push(trivia[i]);
        };

    })
    //time: run
    function runTime() {
        if (!running) {
            intervalId = setInterval(decrement, 1000);
            running = true;
        }
    }
    //time--
    function decrement() {
        $("#timeLeft").html("<h4>👻 Madonna, we're running out of time 👻 " 
    + time + " 👀</h4>");
        time--;

        //stop time if reach 0
        if (time === 0) {
            unansweredCount++;
            stop();
            $("#choicesDiv").html("<p>Oh no! You ran out of time 😂. The 
    correct choice is: " + chosenOne.choices[chosenOne.rightChoice] + " 
   </p>");
            hideimage();
        }
    }

    //time stop
    function stop() {
        running = false;
        clearInterval(intervalId);
    }
   play question and loop though and display possible answers
    function displayTrivia() {
        //generate random triviaRand in array
        triviaRand = Math.floor(Math.random() * trivia.length);
        //console.log(triviaRand);
        chosenOne = trivia[triviaRand];
        console.log(chosenOne);

        $("#questionDiv").html("<h2>" + chosenOne.question + "</h2>");
        for (var i = 0; i < chosenOne.choices.length; i++) {
            var newUserChoice = $("<div>");
            newUserChoice.addClass("answerChoices");
            newUserChoice.html(chosenOne.choices[i]);
            //assign array position to it so can check rightChoice
            newUserChoice.attr("userChoices", i);
            $("#choicesDiv").append(newUserChoice);
        }

        //click function to select rightChoice
        $(".answerChoices").click(function () {
            //parseInt() function parses a string argument and returns an 
    integer of the specified radix
            //locate array based on userChoice
            userSelection = parseInt($(this).attr("userChoices"));
            console.log(userSelection);
            if (userSelection === chosenOne.rightChoice) {
                console.log(chosenOne.choices[chosenOne.rightChoice]);
                stop();
                selected = true;
                rightAnswer++;
                userSelection = "";
                $("#choicesDiv").html("<p>Damn, boi 🐱‍🐉👌</p>");
                hideimage();
                console.log(rightAnswer);
            } else {
                stop();
                selected = true;
                wrongAnswer++;
                userSelection = "";
                $("#choicesDiv").html("<p>🤔That is incorrect! The correct 
    choice is: " + chosenOne.choices[chosenOne.rightChoice] + "</p>");
                hideimage();
                console.log(wrongAnswer);
            }
        })

        function hideimage() {
            $("#choicesDiv").append("<img src=" + chosenOne.image + ">");
            newArray.push(chosenOne);
            trivia.splice(triviaRand, 1);

            var hideimg = setTimeout(function () {
                $("#choicesDiv").empty();
                time = 15;

                //run the score screen if all questions answered
                if ((wrongAnswer + rightAnswer + unansweredCount) === 
    totalCount) {
                    //clearbck();
                    $("#questionDiv").empty();
                    $("#questionDiv").html("<h3>🧐 Game Over!  Let's see 
    your score 😱: </h3>");
                    $("#choicesDiv").append("<h4> 🤪 Correct: " + 
    rightAnswer + "</h4>");
                    $("#choicesDiv").append("<h4> 🤬 Incorrect: " + 
    wrongAnswer + "</h4>");
                    $("#choicesDiv").append("<h4> 🤯 Unanswered: " + 
    unansweredCount + "</h4>");
                    $("#resetBtn").show();
                    rightAnswer = 0;
                    wrongAnswer = 0;
                    unansweredCount = 0;

                } else {
                    runTime();
                    displayTrivia();

                }
            }, 2000);


        }

        $("#resetBtn").on("click", function () {
            $(this).hide();
            $("#choicesDiv").empty();
            $("#questionDiv").empty();
            for (var i = 0; i < placeHolder.length; i++) {
                trivia.push(placeHolder[i]);
            }
            runTime();
            displayTrivia();

        })

    }
    })` 

Answer 1

就像語法錯誤糾正一樣！ 你應該在hideimage函數中使用img標簽的src屬性中的單引號或雙引號：

$("#choicesDiv").append("<img src=' " + chosenOne.image + " '>");