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>
1 answers
solution1
1 ACCPTED 2017-05-27 10:44:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript recursion loop items to array
JavaScript For Loop Skipping items in an Array
Log the individual items of an array with a for loop with javascript
javascript loop through .children() items and save to array
Loop objects in Javascript array and count similar items
JavaScript For Loop skips some items in an array
Pop off array within Javascript for loop not getting all array items
How can I list out items in an array using a for loop in javascript?
Using a for loop to push items onto a Map in JavaScript reverses the order of the array
javascript loop through list items and return the results in an array
Related Tags