javascript - 无法使用测验页面上的最终分数更新变量 - 范围问题？

Question

我正在研究测验页面格式。我有一个保存总分的变量，但当玩家回答测验的最后一个问题时我无法让它显示它。当我控制台记录变量时，会显示正确的分数，但当我尝试将其打印在页面上时，它始终为 0。我认为这是一个范围问题，但我不确定。

这里是 codepen enter link description here 的链接

和代码

//get total of questions
var $questionNumber = $('h2').length;
console.log($questionNumber);
//caching final score
var $totalScore = 0;

$('li').click(function(){
    //show result after last li is clicked
    var $height = $('.finalResult').height();
    if ($(this).hasClass('last')) {
        $('.finalResult').show();
        $('html, body').animate({ 
       scrollTop: $(document).height()-$height}, 
       1400);
    };
    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');

    //deactivate options on click
     $parent.find('li').off("click");

    //check for .correct class
        //if yes
        if($(this).hasClass('correct')){
            //add .correctAnswer class
            $(this).addClass('correctAnswer');
            //find next span and change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of siblings
            $(this).siblings().addClass('fade');
            //show answer
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.show();
            $toShowFalse.remove();
            //add 1 to total score
            $totalScore+=1;
            console.log($totalScore);
        }else{
            //add .wrongAnswer class
            $(this).addClass('wrongAnswer').addClass('fade');
            //change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of its siblings
            $(this).siblings().addClass('fade');
            //show wrong Message
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.remove();
            $toShowFalse.show();
            //locate correct and highlight
            $parent.find('.correct').addClass('correctAnswer');
        };
});//end click function

//print Results
function printResult(){
    var resultText = '<p>';
    if ($totalScore===$questionNumber){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>This is awesome!</p>');
        $('#halfImage').append('<img src="images/success.gif" width="100%"><img>');
    }else if($totalScore>=3){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>So and so...better luck next time</p>');
        $('#halfImage').append('<img src="images/so_and_so.gif" width="100%"><img>');
    }else if ($totalScore<3){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+' </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>No..no...no...you have to try harder</p>');
        $('#halfImage').append('<img src="images/dissapointed.gif" width="100%"><img>');
    }
};//end function
printResult();

有什么想法吗？谢谢!

Answer 1

您可以在执行开始时、声明之后立即调用 printResult() 函数。此时，$totalScore == 0。测验结束时您没有调用或更新该函数，因此该值仍为 0。