javascript - Uncaught TypeError: undefined is not a function, object created in for loop - Stack Overflow

admin管理员组

文章数量:1406015

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

Share Improve this question Follow edited Dec 16, 2013 at 20:56 RienNeVaPlu͢s 7,67266 gold badges4545 silver badges7878 bronze badges asked Dec 16, 2013 at 20:49 fedfiercefedfierce 4311 silver badge44 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

本文标签：