I have an array of 5 questions. When I click the next button, I want the next question to be shown in the h2 element

Question

The problem is when I click the next button, it goes to the last question. I want when the button is clicked, the loop goes through all the question one by one.

 var showquestion = document.querySelector('.content h2'); var nextbtn = document.getElementById('next'); var prevbtn = document.getElementById('prev'); //set questions in array var questions = [ "hell I am the first question", "hell I am the second question", "hell I am the thirs question", "hell I am the fourth question" ] //next question function nextbtn.addEventListener('click', nextquestion); function nextquestion() { var random = Math.floor() for (var i = 0; i < questions.length; i++) { showquestion.textContent = questions[i]; } }

 <div class="container"> <div class="content"> <h2>Hello the question will go here</h2> <input type="button" name="b1" id="next" value="Next"> <input type="button" name="b2" id="prev" value="Previous"> </div> </div>

Answer 1

Math.floor((Math.random() * questions.length) + 1) will fix your error on the code level but it's not what you want. If you want to do the prev and next button for all questions, you need to use a variable for the current question's index.

Answer 2

 var showquestion =document.querySelector('.content h2'); var nextbtn = document.getElementById('next'); var prevbtn = document.getElementById('prev'); var count=-1; var first = true; //set questions in array var questions = [ "hell I am the first question", "hell I am the second question", "hell I am the thirs question", "hell I am the fourth question" ] //next question function nextbtn.addEventListener('click',nextquestion); prevbtn.addEventListener('click',prevquestion); function nextquestion(){ first=false; var random = Math.floor() count++; count=count%4; showquestion.textContent = questions[count]; } function prevquestion(){ var random = Math.floor() if(first){ first=false; count++; } count--; if(count < 0)count=count+4; showquestion.textContent = questions[count]; }

 <div class="container"> <div class="content"> <h2>Hello the question will go here</h2> <input type="button" name="b1" id="next" value="Next"> <input type="button" name="b2" id="prev" value="Previous"> </div> </div>

Answer 3

You need to use a counter to move between the array.

next button increments the counter and prev button decrements it.

var showquestion = document.querySelector('.content h2');
var nextbtn = document.getElementById('next');
var prevbtn = document.getElementById('prev');

//set questions in array

var questions = [
  'hell I am the first question',
  'hell I am the second question',
  'hell I am the thirs question',
  'hell I am the fourth question',
];

let questionCount = 0;
//initial question is set to first element in array
showquestion.textContent = questions[questionCount];

nextbtn.addEventListener('click', () => {
  if (questionCount < questions.length - 1) {
    questionCount++;
  }
  showquestion.textContent = questions[questionCount];
});

prevbtn.addEventListener('click', () => {
  if (questionCount > 0) {
    questionCount--;
  }
  showquestion.textContent = questions[questionCount];
});

here is the code pen demo