Javascript/jQuery trivia game - not displaying next ? in array

Question

All right folks, here is the issue I am having-

I am creating a trivia game using jQuery. The first question and set of answers is loading and the correct/and incorrect answers are "assigned" to the correct buttons.

However, the game does not advance past the first question. My thoughts are is that my separate "next question" function is outside of the nested for loops and this not in the correct scope to know to move onto the next question in the array. I originally had my code so it was randomizing the questions in the array, but then I ended up having questions repeat and I was getting frustrated with trying to troubleshoot that so I tried something else.

And actually, to come to think of it- the first question being displayed is actually the LAST item in the question array.

You can view the game here- https://alyciamriley.github.io/atomic-trivia/ the repo is here - https://github.com/AlyciamRiley/atomic-trivia

and I have included my code as well.

window.onload = function() {
  let intervalId;
  let timer = 10;
  //need set of questions

  let questionArray = [
    {
      question:
        "Who recorded the original version of the song "Hound Dog"?",
      answers: [
        'Willa Mae "Big Mama" Thornton',
        "Elvis Presley",
        "Carl Perkins",
        "Chuck Berry",
        "Miley Cyrus"
      ],
      correctAnswer: 'Willa Mae "Big Mama" Thornton'
    },
    {
      question:
        "Who was marketed by her record company as the "Female Elvis"?",
      answers: [
        "Wanda Jackson",
        "Janis Martin",
        "Patsy Cline",
        "Diana Ross",
        "Miley Cyrus"
      ],
      correctAnswer: "Janis Martin"
    },
    {
      question:
        "Who sang the 1957 song "Whole Lotta Shakin Goin On"?",
      answers: [
        "Elvis Presley",
        "Jerry Lee Lewis",
        "Gene Vincent",
        "Buddy Holly",
        "Miley Cyrus"
      ],
      correctAnswer: "Jerry Lee Lewis"
    },
    {
      question:
        ""Rebel-Rouser", "Cannonball", and "Because They Are Young" were all hits by which artist?",
      answers: [
        "The Big Bopper",
        "Jerry Lee Lewis",
        "Gene Vincent",
        "Duane Eddy",
        "Miley Cyrus"
      ],
      correctAnswer: "Duane Eddy"
    },

    {
      question:
        "Who spent three weeks at No.1 in 1957 with "That’ll be the Day"?",
      answers: [
        "Buddy Holly",
        "June Carter",
        "Little Richard",
        "Fats Domino",
        "Miley Cyrus"
      ],
      correctAnswer: "Buddy Holly"
    }
  ];

  // Needed functions--

  //start game (start the timer, get it to decrement, load first question) -- on click

  $("#startGame").on("click", function() {
    $("#startGame").replaceWith();

    startTimer();
    decrement();
    firstQuestion();
  });

  //this is your timer.  It is working.  Do not touch it.
  function startTimer() {
    intervalId = setInterval(decrement, 1000);
  }

  function decrement() {
    timer--;
    $("#countdown").html("<span>" + timer + "<span>");

    if (timer === 0) {
      stopTimer();
    }
  }

  function stopTimer() {
    clearInterval(intervalId);
    nextQuestion();
  }

  function firstQuestion() {
    //Get first question
    for (let i = 0; i < questionArray.length; i++) {
      $("#question-display").html(questionArray[i].question);

      //Loop through question array and create buttons for each answer
      // Clear button div of any newly created buttons
      $("#answer-display").empty();
      for (let j = 0; j < questionArray[i].answers.length; j++) {
        var a = $("<button>");

        // add class to the button
        a.addClass("btn-answer");
        // adds a data attribute
        a.data("name", questionArray[i].answers[j]);

        //label buttons
        a.text(questionArray[i].answers[j]);

        //if else statement, randomQuestion.answers is e qual to randomQuestion.correctAnswer, then add btn-correct answer

        if (questionArray[i].answers[j] == questionArray[i].correctAnswer) {
          a.addClass("btn-correctAnswer");
          a.addClass("btn-answer");
        } else {
          a.addClass("btn-answer");
        }

        $("#answer-display").append(a);
      }

      //adds button to div
      $("#answer-display").append(a);
    }
  }

  $("#answer-display").on("click", ".btn-answer", function(event) {
    //get answer from clicked element
    event.preventDefault();
    var answer = $(".btn-answer").val;
    //get correct answer from parent element
    var correctAnswer = $(this).hasClass("btn-correctAnswer");
    console.log(correctAnswer);
    //correct logic
    if (correctAnswer) {
      $("#alert-box").text("You got it, daddy-o!");
      // numberCorrect++;

      setTimeout(nextQuestion, 2000);
      stopTimer();
      // checkScore();
    } else {
      $("#alert-box").text(
        "You're cruisin' for a bruisin'- that answer is wrong!"
      );
      // numberIncorrect++;
      setTimeout(nextQuestion, 2000);
      stopTimer();
      // checkScore();
    }
  });

  function nextQuestion() {
    $("#question-display").empty();
    $("#answer-display").empty();
    $("#countdown").empty();

    timer = 11;
    startTimer();
    firstQuestion();
    console.log("nextQuestion is running!");
  }
};

Answer 1

The problem is in your nextQuestion function. You keep calling firstQuestion() in that function. And well... you keep getting the first question like you'd expect because every time you call that function, you are resetting i to 0 and the loop starts with the first question again.

A better solution might be something like a getQuestion function that takes a parameter for which question to get. So you'd call it like getQuestion(i) where i is a variable that you set and increment outside of your loop.