Question

对于我的网站，我需要一个循环问题和答案的函数。在最后一个问题之后，第一个问题应该再次出现。

我找到了一些东西，但是循环不起作用，它当然很简单，但我不明白。

<!DOCTYPE html>
<html>
<body>

<div> 
                <div id="question" onclick="changeText()"> 
                    Start Quiz
</div>                 
                <div id="answer" onclick="nextQuestion()"> 
                    are you ready?
</div>
</div>

<script type="text/javascript">
   var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
   
    var questionList = details.split("qst:");
   
   var div  = document.getElementById('question');
   var ans = document.getElementById('answer');
   
   function changeText(){
     if (div.style.display !== 'none') {
        div.style.display = 'none';
     ans.style.display = 'block';
       }
       else {
        div.style.display = 'block';
     ans.style.display = 'none';
       }
   }

   function nextQuestion(){
       div.style.display = 'block';
   ans.style.display = 'none';
    var max = questionList.length;
   if(max > 0){
    var num = 0;
    
       var qst = questionList[num].split("ans:");
       div.innerHTML =qst[0];
       ans.innerHTML = qst[1];
       questionList.splice(num,1);}
       else {
           
   				
       }
   }
   
</script>

</body>
</html>

Answer 1

每次到达n时，您必须重置max的值，因此您必须将n放在全局变量范围的外部范围内，并且不要拼接questionList因为你希望在到达它结束后再次遍历该数组：

＆＃13;

var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";

var questionList = details.split("qst:");

var div = document.getElementById('question');
var ans = document.getElementById('answer');

//Variable n must declare here
var num = 0;

function changeText() {
  if (div.style.display !== 'none') {
    div.style.display = 'none';
    ans.style.display = 'block';
  } else {
    div.style.display = 'block';
    ans.style.display = 'none';
  }
}

function nextQuestion() {
  div.style.display = 'block';
  ans.style.display = 'none';
  var max = questionList.length;
  if (max > 0) {

    var qst = questionList[num].split("ans:");
    div.innerHTML = qst[0];
    ans.innerHTML = qst[1];
    //there is no need to splice questionList
    //questionList.splice(num, 1);
    num++;
    //Check for num to not to be greater than questionList.length
    if (num >= max)
      num = 0;
  } else {


  }
}

＆＃13;

<div id="question" onclick="changeText()">
  Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
  are you ready?
</div>

＆＃13;

Javascript：循环数组中的项目

1 个答案: