Uncaught TypeError: Cannot read property 'NaN' of undefined

Question

I am trying to set the variable qnum to add one number when the user selects the correct answer. As you see, I set 'qnum' as a global variable and then try to initiate it's value in my code for function displayCurrentQuestion, and in other places in my code. Everytime I do this, I keep getting the error about not being able to read the property 'NaN', which I know means not a number, but why would that come up here. Esspecially when I set the global variable to '0'!

My site is available at http://keithand.github.io/quiz-app/.

$(document).ready(function() {

//---------GLOBAL VARIABLES

var complete = false; // will become true after quiz is completed
var score = 0;
var response; // the users answer
var qnum = 0; // keeps track of what question number the user is on
var result; //the value if the user answered correctly
var answered; //stores the value of whether the user has already answered the question

var correctAnswer = 0;
var wrongAnswer = 0;

var question = [
        {
        num: 1,
        quote : "Aren't we forgetting the true meaning of Christmas: the birth of Santa.",
        ans : 'Bart Simpson',
        correct: 2
        },
        {
        num: 2,
        quote : "I know how hard it is for you to put food on your family.",
        ans: 'George Bush',
        correct: 1
        },
        {
        num: 3,
        quote: "They misunderestimated me.",
        ans : 'George Bush',
        correct: 1
        },
        {
        num: 4,
        quote: "I don't think there's ever been anyone like me that's lasted. And I'm going to keep lasting.",
        ans : 'Paris Hilton',
        correct: 0
        }
    ];

//DISPLAY CURRENT QUESTION//
     displayCurrentQuestion = function (qnum, question){
        var currentQuestionData = question[qnum];
        var userAnswer = $("input[type='radio']:checked").index("input[type='radio']");
        $('#quest_num').text(currentQuestionData.num);
        $('#quote q').text(currentQuestionData.quote);
    };

        var currentQuestionData = question[qnum];
        var userAnswer = $("input[type='radio']:checked").index("input[type='radio']");

//EVENT HANDLER FOR SUBMIT BUTTON
        $('#submit').on('click', function(qnum, question){ 

                if ( userAnswer == currentQuestionData.correct){
                    alert("Good job!");
                    correctAnswer++;
                    $("#correct").text(correctAnswer);
                } else {
                    alert("Youre wrong.");
                    wrongAnswer++;
                    $("#incorrect").text(wrongAnswer);
                }
            qnum++;
            displayCurrentQuestion(qnum, question);

        });
});

Answer 1

I fixed your code but you really need to learn about variable scope, for example:

 displayCurrentQuestion = function (){//question, qnum are global
    currentQuestionData = question[qnum]; // currentQuestionData is also global but you were declaring it local so it wasn't updating properly
    $('#quest_num').text(currentQuestionData.num);
    $('#quote q').text(currentQuestionData.quote);
};

WORKING DEMO

Answer 2

Your handler is wrong

$('#submit').on('click', function(qnum, question){ 

This forces qnum to be the click event, because you are specifying it as a function argument. What you are looking for is already accessible in this scope, so try changing it to:

$('#submit').on('click', function(){ 

Answer 3

Converting comment to answer

This is wrong

 $('#submit').on('click', function(qnum, question){ 

should be

 $('#submit').on('click', function(e){ 
   e.preventDefault(); // cancel submission