Display next object value in array

Question

I have an array of two objects. When the user presses a button, I would like for the next value of a specific object property to be displayed.

Here is my array:

var allQuestions = [{
    question: "This is question number one",
    choices: ["one", "two", "three", "four"],
    correctAnswer: "two"
}, {
    question: "This is question number two",
    choices: ["dog", "cat", "bear", "lion"],
    correctAnswer: "bear"
}];

When the button is pressed, I would like for the next instance of "question" to be displayed.

Here is my function to switch out the question:

function switchQuestion() {

    var singleQuestion = 0;

    if(singleQuestion >= allQuestions.length) {
        singleQuestion == 0;
    } else {
        singleQuestion == ""; // not sure what should go here
    }

    document.getElementById('question').innerHTML = allQuestions[singleQuestion].question;

}

score 3 · Accepted Answer · answered Apr 03 '13 at 14:32

3

You need to scope the question index outside of the function, increment in each time the button is clicked and re-assign it back to 0 when it's outside the bounds of the array:

var questionIndex = 0;
function switchQuestion() {
  if(++questionIndex >= allQuestions.length) {
    questionIndex = 0;
  }

  document.getElementById('question').innerHTML = allQuestions[singleQuestion].question;
}

answered Apr 03 '13 at 14:32

Rich O'Kelly

41,274
9
83
114

Ok, perfect, thank you. Could you explain why I need to scope the question index outside of the function or point me to some reading resources? – user2137425 Apr 03 '13 at 14:39
Also, I can't accept your answer for five minutes. I will accept it as soon as I am able. – user2137425 Apr 03 '13 at 14:39
@user2137425 if you don't scope the question index outside of the function whenever it is called the previous `questionIndex` will be forgotten (ie the knowledge of which question you are currently displaying will be lost) so you can never move to the next question – Rich O'Kelly Apr 03 '13 at 14:47

Ja͢ck · Answer 2 · 2013-04-03T15:20:05.373

In this code:

if(singleQuestion >= allQuestions.length) {
        singleQuestion == 0;
    } else {
        singleQuestion == ""; // not sure what should go here
    }

An assignment is done with = instead of ==:

if (singleQuestion >= allQuestions.length) {
    singleQuestion = 0;
} else {
    singleQuestion = singleQuestion + 1; // increment
}

The increment can also be achieved in this short form:

singleQuestion++;

The whole expression can also be replaced by using modulus calculation:

singleQuestion = (singleQuestion + 1) % allQuestions.length;

Lastly, the variable singleQuestion must be defined outside of your function.

You also need to scope `singleQuestion` outside of the function or else it will always be zero or one — Rich O'Kelly, Apr 03 '13 at 14:40

score 0 · Answer 3 · answered Apr 03 '13 at 14:34

You need to store the currentQuestion somewhere then increment it onclick

  var singleQuestion = 0;

  function switchQuestion() {

  if(singleQuestion >= allQuestions.length) {
      singleQuestion == 0;
   } else {
    singleQuestion +=1; 
   }

document.getElementById('question').innerHTML = allQuestions[singleQuestion].question;

 }

At present you would reset it back to 0 on every click regardless and only ever show the first or second question based on the length

score 0 · Answer 4 · edited May 23 '17 at 12:13

Here is a JSFiddle example that shows possible implementation of your script.

I would suggest using just one global object.
And using .createElement() instead of .innerHTML(). Here is a discussion.

In short:

var myGlobalVar = {
    singleQuestion: 0,
    nextButton: document.getElementById("nextQstBtn"),
    questionHolder: document.getElementById("questionHolder"),
    allQuestions: [qstObjOne, qstObjTwo, qstObjThree],

    switchQuestion: function () {
        myGlobalVar.singleQuestion += 1;
        if (myGlobalVar.singleQuestion === myGlobalVar.allQuestions.length) {
                myGlobalVar.singleQuestion = 0;
        }
        myGlobalVar.showQuestion(myGlobalVar.singleQuestion);
    },
    showQuestion: function (qstNum) {
        // Implementation
    },
    init: function () {
        // Script initialisation
        // Attaching events, etc.
};

myGlobalVar.init();

Display next object value in array

4 Answers4