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);

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);

• javascript
• jquery
• object

• 3 A good rule of thumb is to use capital letters for constructors. Change var question = function(...) to var Question = function(...). – Colin DeClue Commented Dec 16, 2013 at 20:56

2 Answers 2

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 bees:

   $('#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) {
 .....

you're overriding the global question var with undefined. Below is equivalent to what you have:

$('#buildQuiz').click(function() {
    var question; // this is why `question` is undefined

    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()); 
        });

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

    }
    allQuestions[0].populateQuestions();
    $('#questionBuilder').hide();
    $('#quizWrapper').show();
});

You'll need to use a different variable name, or rename your class to have an Uppercase first letter (which is pretty standard)