JavaScript Quiz TypeError: Cannot read property '0' of undefined

Question

This is my first big JavaScript project so please excuse my ignorant mistakes.

I've been getting this strange error above.

I'm trying to create a quiz that cycles through questions stored in an array. The questions should update when the user clicks a button. Also, yes, it's "The Office" themed quiz.

Here's my JS:

let q = 0;
let rb1 = 0;
let rb2 = 1;
let rb3 = 2;
let rb4 = 3;

const cycle_questions = function() {
const newQuestion = document.getElementById('nextQuestion');

newQuestion.onclick = function() {
    let currentQuestion = (quizQuestions.question[q]);
    let currentRadio1 = (quizQuestions.choices[rb1]);
    let currentRadio2 = (quizQuestions.choices[rb2]);
    let currentRadio3 = (quizQuestions.choices[rb3]);
    let currentRadio4 = (quizQuestions.choices[rb4])
    $('.question').innerHTML(currentQuestion);
    $('#r1').innerHTML(currentRadio1);
    $('#r2').innerHTML(currentRadio2);
    $('#r3').innerHTML(currentRadio3);
    $('#r3').innerHTML(currentRadio4);
    q++;
    rb1 = rb1 + 3;
    rb2 = rb2 + 3;
    rb3 = rb3 + 3;
    rb4 = rb4 + 3;
};
};

Here's my array:

const quizQuestions = [{
      "question": "What office employee did Michael hit with his car?",
      "choices": ["Stanley", "Angela", "Kevin" , "Meredith"],
      "correct": "Meredith"
    }, {
      "question": "During the Fire Drill episode, what DID NOT happen?",
      "choices": ["Someone breaks into the vending machine", "Someone throwing a cat into the ceiling", "Someone hides in the utility closet" , "Someone lights firecrackers"],
      "correct": "Someone hides in the utility closet"
    }];

And here is my HTML:

<form id="game">
            <div class="formContainer">
                <div class="question">Question Goes Here</div>
                <div class="choices">
                    <label id="r1">
                        <input onclick="check()" id="wrong" type="radio" name="answer"/>Answer 1
                    </label>

                    <label class="rightAnswer" id="r2">
                        <input onclick="check()" id="correct" class="correct" type="radio" name="answer"/>Answer 2
                    </label>

                    <label id="r3">
                        <input onclick="check()" id="wrong" type="radio" name="answer"/>Answer 3
                    </label>

                    <label id="r4">
                        <input onclick="check()" id="wrong" type="radio" name="answer"/>Answer 4
                    </label>
                </div>

                <input id="submitButton" class="submitButton" type="submit" value="Submit Answer">
                <button onclick="cycle_questions()" id="nextQuestion" class="nextQuestion">Next Question</button>
            </div>
        </form>

Any help is appreciated! Thanks!

This line: let currentQuestion = (quizQuestions.question[q]); It's specifically highlighting the [q] @AlexWayne — tphan
– tphan, Commented Nov 1, 2018 at 22:00

Axel M · Accepted Answer · 2018-11-01 22:01:11Z

1

Your problem is in this line:

let currentQuestion = (quizQuestions.question[q]);

because your quizQuestions Array has no property question. Instead your Objects in the array have this property.

The error is therefore thrown because quizquestion.question is "undefined" and it has no property 0 ([q])

what you probably wanted to do is this:

let currentQuestion = (quizQuestions[q].question);

Also the same will happen to you in the following lines:

quizQuestions.choices[rb1]...

answered Nov 1, 2018 at 22:01

Axel M

3711 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tphan Over a year ago

Thank you! That did it.

Collectives™ on Stack Overflow

JavaScript Quiz TypeError: Cannot read property '0' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related