How to access next object in an array by incrementing

Solution 1:

Take a global variable let currentQuestionIndex = 0; & update your nextQuestion function as below. Also update your startQuiz() function and set currentQuestionIndex = 0; & replace showQuestion(myQuestions[0]); with nextQuestion();

function nextQuestion() {
  // Add condition so at last question it will stop at last question
  if (myQuestions.length > currentQuestionIndex) {
    showQuestion(myQuestions[currentQuestionIndex]);
    currentQuestionIndex++;
  }
}

function startQuiz() {
  container.style.visibility = "visible";
  btn_start.style.visibility = "hidden";
  currentQuestionIndex = 0;
  nextQuestion();
}

Your complete code will look like below. I have commented some of your code just for testing purpose.

let currentQuestionIndex = 0;
let myQuestions = [
    {
        question: "What's 2+2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
    {
        question: "What's 10+10?",
        answers: [
            { text: "20", correct: true },
            { text: "2", correct: false },
            { text: "18", correct: false },
            { text: "0", correct: false },
        ],
    },
];

function startQuiz() {
  //container.style.visibility = "visible";
  //btn_start.style.visibility = "hidden";
  currentQuestionIndex = 0;
  nextQuestion();
}

function showQuestion(questionAndAnswers) {
  // temp code for alert
  alert(questionAndAnswers.question);
  //const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
  //questionTag.innerText = questionAndAnswers.question;
  //answerTag[0].innerText = shuffledAnswers[0].text;
  //answerTag[1].innerText = shuffledAnswers[1].text;
  //answerTag[2].innerText = shuffledAnswers[2].text;
  //answerTag[3].innerText = shuffledAnswers[3].text;
}

function nextQuestion() {
  // Add condition so at last question it will stop at last question
  if (myQuestions.length > currentQuestionIndex) {
    showQuestion(myQuestions[currentQuestionIndex]);
    currentQuestionIndex++;
  }
}

<input type='button' value='Start Quiz' onclick=startQuiz() />
<input type='button' value='Next question' onclick=nextQuestion() />

Solution 2:

You can store your current question index and use that to step through the list:

let currentQuestionIndex = 0;
let myQuestions = [
    {
        question: "What's 2+2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
    {
        question: "What's 10+10?",
        answers: [
            { text: "20", correct: true },
            { text: "2", correct: false },
            { text: "18", correct: false },
            { text: "0", correct: false },
        ],
    },
];
function startQuiz() {
    container.style.visibility = "visible";
    btn_start.style.visibility = "hidden";
    showQuestion(myQuestions[0]);
}
function showQuestion(questionAndAnswers) {
    const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
    questionTag.innerText = questionAndAnswers.question;
    answerTag[0].innerText = shuffledAnswers[0].text;
    answerTag[1].innerText = shuffledAnswers[1].text;
    answerTag[2].innerText = shuffledAnswers[2].text;
    answerTag[3].innerText = shuffledAnswers[3].text;
}
function nextQuestion() {
    const nextIndex = currentQuestionIndex + 1;
    if (nextIndex < myQuestions.length - 1) {
      showQuestion(myQuestions[nextIndex]);
      currentQuestionIndex = nextIndex;
    } else {
        console.log('end of question list');
    }
}