我有 5 個問題。 當我單擊下一個按鈕時，我希望下一個問題顯示在 h2 元素中

Question

問題是當我單擊下一個按鈕時，它會轉到最后一個問題。 我希望在單擊按鈕時，循環一一解決所有問題。

 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)將在代碼級別修復您的錯誤，但這不是您想要的。 如果要對所有問題執行上一個和下一個按鈕，則需要為當前問題的索引使用一個變量。

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

您需要使用計數器在陣列之間移動。

下一個按鈕增加計數器，上一個按鈕減少它。

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

這是代碼筆演示