可以't在quizz页面范围问题上用最终分数更新变量
Can't update variable with final score on quizz page - scope issue?
我正在开发一种quizz页面格式。我有一个变量来保持总分,但当玩家回答提问的最后一个问题时,我无法让它显示出来。当我控制台记录变量时,会显示正确的分数,但当我试图在页面上打印它时,它总是0。我认为这是一个范围问题,但我不确定。
这里是代码的链接笔在这里输入链接描述
和代码
//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();
有什么想法吗?谢谢
在执行开始时,在声明printResult()
函数之后立即调用它。此时,$totalScore==0。在测试结束时,您不会调用或更新函数,因此该值保持为0。
相关文章:
- React:使用索引变量更新嵌套集合
- 范围变量更新,但不更新视图
- 正在将代码库中的C#变量更新到asp.net
- 使用变量更新剑道图表系列的数据会导致重绘将列从图表上绘制出来
- MongoDB 用变量更新数组
- 将变量更新为函数中的参数
- Javascript-变量更新
- 使用Javascript和PHP变量更新页面上的数据
- Angular js 在
标签上的变量更新$scope动画
- 如何通过参数变量更新对象的属性值
- 如何在范围变量更新时更新模板
- 简单的变量更新和写入页
- 函数在变量更新后的某个时间点执行
- javascript OO如何用一些JSON变量更新self参数
- 使用$set中的变量更新mongodb的node.js
- 将声明的null变量更新为布尔值
- 在查询部分使用变量更新查询
- 如何在回调中使用变量更新文档?
- 通过AJAX用PHP变量更新URL
- 防止在没有javascript的情况下在页面刷新后进行变量更新