How can I iterate through an array with a 'click' event in JavaScript?

Question

I am making a quiz where the text (questions, answers etc.) will be loaded with javaScript.

So far I have created two buttons, (one going forward, the other backwards); And I'd like the buttons to load up my questions when clicked...

This is the array:

var allQuestions = [{
"question": "Who was Luke's wingman in the battle at Hoth?",
"choices": ["Dak", "Biggs", "Wedge", "fx-7"],
"correctAnswer": 0
}, {//question #2 }, {//question #3 etc},...];

This is my Js:

var button = document.querySelector('.navForward');

button.addEventListener('click', function() {
            var questionOutput = " ";
            var currentQuestion = 0;
            var item = allQuestions;

            if(currentQuestion < item.length){
                    currentQuestion++;
            }
            questionOutput += "<h4>" + item.question[currentQuestion] + "</h4> <br/>";
            var update = document.getElementById("question");

            update.innerHTML = questionOutput;

    },      false);

And could someone explain this error I get in the console?

Uncaught TypeError: Cannot read property '1' of undefined script.js:84 (anonymous function)

Answer 1

There is no question property in the item object, as it's an array.

Change item.question[currentQuestion] to item[currentQuestion].question .