无法解决这个简单的bug

时间:2013-06-12 19:29:25

标签: javascript jquery

第一次在这里发帖。从我的朋友那里得到一个提示,问问你们是不错的选择。

所以事情是我已经做了一个测验页面,除了造型之外我几乎已经完成了。 但我有一个我无法解决的错误,我的朋友也不能解决。

测验就像这样

你得到一张照片,收据和4个答案可供选择。 选择一个后,你会得到一张新照片和收据 经过10张照片后,你应该得到你的分数

这就是bug的所在。不知何故,计算正确答案的变量显示出非常高的数字。

例如:如果你在所有问题上回答正确,你会得到“257个正确的答案中的10个”

我做了一个测验页面,除了样式之外,我已经完成了很多工作。 但我有一个我无法解决的错误,我的朋友也不能解决。

测验就像这样

你得到一张照片,收据和4个答案可供选择。 选择一个后,你会得到一张新照片和收据 经过10张照片后,你应该得到你的分数

这就是bug的所在。不知何故,计算正确答案的变量显示出非常高的数字。

例如:如果你在所有问题上回答正确,你会得到“257个正确的答案中的10个”

我不知道造成这种情况的原因。但它可能是循环if-else语句。

here's the link to the page,以便您可以根据需要为自己进行测试。

main.js代码。

(function () {
    var numberOfQuestions = 10;
    var atQuestion = 0;
    var correctAnswers = 0;
    var questions = "";
    var askQuestion = function (question, atQuestion) {
        //
        //console.log(question.name + "  "+ atQuestion);
        $("#content img").attr("src", question.path);
        $("#recipe").html(question.recept)
        $("#btn1").html(question.Alt1);
        $("#btn2").html(question.Alt2);
        $("#btn3").html(question.Alt3);
        $("#btn4").html(question.name);
        $("#content").show();
        $("#start").hide();
        $("#btn1, #btn2, #btn3, #btn4").on("click", function (e) {
            $("#content").hide();
            var rightAnswer = question.name;
            if (rightAnswer == $(e.target).html()) {
                correctAnswers++;
                //console.log("rätt svart är" + $(e.target).html());
            } else {
                // console.log("fel svar");
            }
            var quests = JSON.parse(localStorage.getItem('qz'));
            atQuestion = atQuestion + 1;
            //console.log("atquestion: " + atQuestion);
            if (atQuestion === numberOfQuestions) {
                //console.log("Game over");
                $("#heads_up").html("you had: " + correctAnswers + " correct answers out of " + numberOfQuestions);
                $("#mainQuestion").hide();
                //atQuestion = 0;
                //correctAnswers = 0;
            } else {
                askQuestion(quests[atQuestion], atQuestion);
            }
        });
    };
    $(document).ready(function () {
        $("#start").hide();
        $("#content").hide();
        $("#RestartBtn").hide();
        $("#mainQuestion").hide();
        $("#start").on("click", function () {
            $("#mainQuestion").show();
            $("#RestartBtn").show();
            questions = localStorage.getItem('qz');
            var qObjs = JSON.parse(questions);
            atQuestion = 0;
            askQuestion(qObjs[atQuestion], atQuestion);
        });
    });
    $.ajaxSetup({
        url: "../get_quiz.php",
        type: "GET",
        headers: {
            "Accept": "application/json",
                "Content-type": "application/x-www-form-urlencoded"
        }
    });
    $.ajax({
        success: function (data) {
            var jsonObj = JSON.parse(data);
            //console.log(jsonObj);
            localStorage.setItem('qz', JSON.stringify(jsonObj));
            $("#start").show();
        },
        error: function (object, data) {
            alert("The quiz coulnd't load!");
        },
    })
}());

1 个答案:

答案 0 :(得分:3)

每次问题发生变化时,您都会将onclick事件添加到按钮中。因此,每次点击事件都会触发越来越多次。

我测试并验证了。这就是问题所在。您要么取消绑定,重新绑定事件,要么将“.on()”呼叫移至当前呼叫之外。