Javascript: Loop items in array

Question

For my website I need a function with questions and answers in loop. After the last question the first question should come again.

I have found something but the loop does not work, it is certainly simple but I do not get that.

<!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>

Yashar Aliabbasi · Accepted Answer · 2017-05-27 10:44:03Z

1

You must reset value of n every time reach to max so you must put n in outer scope in global variable scope and don't splice questionList because you want to iterate over that array again after reaching to end of it:

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 {


  }
}

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

answered May 27, 2017 at 10:44

Yashar Aliabbasi

2,7591 gold badge28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Over a year ago

Thank you Exactly what I was looking for.

Yashar Aliabbasi Over a year ago

@Frank If so please accept It and vote up.Thank you in advance

Collectives™ on Stack Overflow

Javascript: Loop items in array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related