显示数组中的下一个对象值

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;

}

Answer 1

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;
}

Answer 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.

Answer 3

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

Answer 4

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