Почему моя функция скрытия изображения не работает должным образом? - PullRequest
0 голосов
/ 14 апреля 2019

Мой код работал должным образом, пока я не решил внести небольшое изменение, и я думаю, что случайно что-то удалил, потому что моя консоль говорит, что скрытое изображение не определено с уменьшением, когда я уже определил скрытое изображение. Я не могу найти свою ошибку, все работало нормально: '(. Я перебрал свою функцию скрытия изображения, и кажется, что все правильно. Когда я загружаю ее в 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();

        })

    }
    })` 

1 Ответ

0 голосов
/ 14 апреля 2019

Так же, как исправление синтаксической ошибки! Вы должны использовать одинарные или двойные кавычки в атрибуте src тега img в функции hideimage:

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