Uncaught TypeError: undefined is not a function, object created in for loop

Question

I'm building a small Quiz application where users can build their own quizzes but have run into a problem with creating objects in a for loop.

Here is the constructor for the Question object:

var question = function(questionNumber, question, choices, correctAnswer) {
    this.questionNumber = questionNumber;
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer; //The number stored here must be the location of the answer in the array

    this.populateQuestions = function populateQuestions() {
        var h2 = $('<h2>').append(this.question);
        $('#quizSpace').append(h2);
        for (var i = 0; i < choices.length; i++) {
            //Create the input element
            var radio = $('<input type="radio">').attr({value: choices[i], name: 'answer'});

            //Insert the radio into the DOM
            $('#quizSpace').append(radio);
            radio.after('<br>');
            radio.after(choices[i]);
        }
    };
    allQuestions.push(this);
};

I have a bunch of HTML that is generated dynamically which I then pull the values from and place them in a new object like so:

$('#buildQuiz').click(function() {
    var questionLength = $('.question').length;
    for ( var i = 1; i <= questionLength; i++ ) {
        var questionTitle = $('#question' + i + ' .questionTitle').val();
        var correctAnswer = $('#question' + i + ' .correctAnswer').val() - 1;
        var inputChoices = [];
        $('#question' + i + ' .choice').each(function(){
            inputChoices.push($(this).val()); 
        });

        var question = new question(i, questionTitle, inputChoices, correctAnswer);
        }
    allQuestions[0].populateQuestions();
    $('#questionBuilder').hide();
    $('#quizWrapper').show();
});

However, when I click the #buildQuiz button I receive the error:

Uncaught TypeError: undefined is not a function 

On this line:

var question = new question(i, questionTitle, inputChoices, correctAnswer);

Answer 1

That is because of the line var question = new question(i, questionTitle, inputChoices, correctAnswer); which creates another variable question in its scope i.e in the click event handler. And due to variable hoisting it is moved to the top of the scope(function) and it eventually becomes:

   $('#buildQuiz').click(function() {
     var question; //undefined
      ...
      ...
      //here question is not the one (constructor) in the outer scope but it is undefined in the inner scope.
     question = new question(i, questionTitle, inputChoices, correctAnswer);

Just change the variable name to something else and try.

     var qn = new question(i, questionTitle, inputChoices, correctAnswer);

or inorder to avoid these kinds of issues you can name your constructor functions in Pascalcase, i.e

 var Question = function(questionNumber, question, choices, correctAnswer) {
 .....