Question

I’ve started making what will be a quiz. I want to move through the array after each question, however. Once I click the question_holder div (place holder for now, will be the correct answer eventually), variable x seems to be DOUBLING.

It goes 1, 2, 4, 8. However, when I alert out the value – it IS actually incrementing by one. It just doesn’t present the right question though, it traverses through all of the questions until it reaches double it’s value, and presents this question to the user.

Anybody know why this is happening?

function question(q, a, b, c) {
    this.q = q;
    this.a = a;
    this.b = b;
    this.c = c;
}

//all questions//
var q0 = new question("question1", "answer a", "answer b", "answer c")
var q1 = new question("question2", "answer d", "answer e", "answer f")
var q2 = new question("question3", "answer g", "answer h", "answer i")
var q3 = new question("question4", "answer j", "answer k", "answer l")
var q4 = new question("question5", "answer m", "answer n", "answer o")
var q5 = new question("question6", "answer p", "answer q", "answer r")
var q6 = new question("question7", "answer s", "answer t", "answer u")
var q7 = new question("question8", "answer v", "answer w", "answer x")

//array to hold all of the questions
var all_questions = [q0, q1, q2, q3, q4, q5, q6, q7];

/*i want to increment this variable by 1 each
    time time i run the new_Question() function.
    */
var x = 0;

$(document).ready(function () {

    new_Question();

    function new_Question() {
        $("#question_holder").text(all_questions[x].q);

        var answer_holders = $("answer_holder");

        $(".answer_holder").eq(0).text(all_questions[x].a);
        $(".answer_holder").eq(1).text(all_questions[x].b);
        $(".answer_holder").eq(2).text(all_questions[x].c);

        $("#question_holder").click(new_Question);

        x++;
        alert(x);
    }
})

Answer 1

In your event handler (“new_Question”) you’re attaching it as an event handler on each click. You only need to do that once, so move that line to outside the function.

So, move this:

    $("#question_holder").click(new_Question);

to after the end of the “new_Question” function (but still inside the “ready” handler).