测验应用程序：javascript 中的按钮无法正常工作

Question

目前我正在做多项选择题的测验。然而，当我点击一个按钮时，它根本不起作用！

这是我的小测验的完整代码 https://github.com/selvabalasingam/TypeQuiz/blob/master/js/app.js

但我确定问题出在第 89-103 行之间（我在下面粘贴了这段代码的一部分）

$('button.choice').click(function(e) {
    var choice = $(e.target).text();
    var question = quiz.getCurrentQuestion(); 
    // check if the answer is right and update question number and score
    if (Question.answer == choice) {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
        getScore = $('.scorePercentage').text(getScore);
    }
    else {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
        getScore = $('.scorePercentage').text(getScore);
    }
    // then go to the next question
    getNextQuestion();
});

谁能告诉我问题出在哪里？有什么办法可以解决这个问题吗？

Answer 1

改变

getTotalCorrect = $('.questionCount').text(getTotalCorrect+1);

至

getTotalCorrect = $('.questionCount').text(quiz.getTotalCorrect+1);

Answer 2

您从未设置 Question.answer 值。这个值有时是一个函数，有时是一个对象。您可能应该重命名 Question.answer（作为 Question.setAnswer.

的函数

from this gist

Question.prototype = {
    setAnswer: function(choice) {
        this.answer = choice;
    },
}

也就是说，永远不会调用 Question.answer/Question.setAnswer，相反你想直接查看 Question.correctChoice。

   if (Question.correctChoice == choice) {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
        getScore = $('.scorePercentage').text(getScore);
    }
    else {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
        getScore = $('.scorePercentage').text(getScore);
    }

Answer 3

如果您查看控制台，您会发现 getTotalCorrect 是 undefined。这是因为 getTotalCorrect 是附加到 quiz 对象范围的方法，但您正试图全局访问它。

你可以改变这个：

if (Question.answer == choice) {
    getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
    getScore = $('.scorePercentage').text(getScore);
}
else {
    getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
    getScore = $('.scorePercentage').text(getScore);
}
getNextQuestion();

至：

question.answer = choice;    // pass the user's choice to the question object
$('.questionCount').text(quiz.getTotalCorrect());
$('.scorePercentage').text(quiz.getScore());
quiz.getNextQuestion();    // load the next question
renderText(quiz.getCurrentQuestion());    // render the new font

看起来 renderText 会无限期地调用自己：

var renderText = function(question) {
    $('.text').css('font-family', question.correctChoice);
    renderText(quiz.getCurrentQuestion());   // infinite recursion call
};

而是在页面加载时调用 renderText，如下所示：

var renderText = function(question) {
    $('.text').css('font-family', question.correctChoice);
};

renderText(quiz.getCurrentQuestion());

测验应用程序：javascript 中的按钮无法正常工作

Quiz App: Buttons in javascript are not functioning

javascript

jquery

button