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

这是代码笔演示