我有 5 个问题。当我单击下一个按钮时，我希望下一个问题显示在 h2 元素中答案

【问题标题】：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我有 5 个问题。当我单击下一个按钮时，我希望下一个问题显示在 h2 元素中
【发布时间】：2020-11-14 12:35:22
【问题描述】：

问题是当我点击下一个按钮时，它会转到最后一个问题。我希望当按钮被点击时，循环一个一个地遍历所有问题。

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>

【问题讨论】：

你做了什么？当您单击下一步时，您正在遍历所有问题，并且不使用随机变量！此外，您需要保存先前随机问题的状态，即索引！只需维护一个变量 i 并继续以问题数组长度的 mod 递增，或者如果您选择随机方法，则保存数组的前一个索引。

标签： javascript html css arrays for-loop

【解决方案1】：

您需要使用计数器在数组之间移动。

next 按钮递增计数器，prev 按钮递减计数器。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

Math.floor((Math.random() * questions.length) + 1) 将在代码级别修复您的错误，但这不是您想要的。如果你想为所有问题做上一个和下一个按钮，你需要为当前问题的索引使用一个变量。

【讨论】：