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;

}

Rich O'Kelly · Accepted Answer · 2013-04-03 14:32:54Z

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 3, 2013 at 14:32

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

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

3 Comments

user2137425 Over a year ago

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 Over a year ago

Also, I can't accept your answer for five minutes. I will accept it as soon as I am able.

Rich O'Kelly Over a year ago

@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

Ja͢ck · Accepted Answer · 2013-04-03 15:20:05Z

2

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.

edited Apr 3, 2013 at 15:20

answered Apr 3, 2013 at 14:32

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

1 Comment

Rich O'Kelly Over a year ago

You also need to scope singleQuestion outside of the function or else it will always be zero or one

TommyBs · Accepted Answer · 2013-04-03 14:34:05Z

0

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

answered Apr 3, 2013 at 14:34

TommyBs

9,7484 gold badges37 silver badges74 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:13:01Z

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

Collectives™ on Stack Overflow

Display next object value in array

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related