Javascript：配列内の項目をループする

私のウェブサイトでは、質問と回答のループが必要です。最後の質問の後、最初の質問が再び来るはずです。Javascript：配列内の項目をループする

私は何かを見つけましたが、ループは機能しません。それは確かにシンプルですが、私はそれを知りません。

<!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 { 
 
      
 
    \t \t \t \t 
 
     } 
 
    } 
 
    
 
</script> 
 

 
</body> 
 
</html>

出典

2017-05-27 Frank

あなたはグローバル変数のスコープで外側のスコープでnを置く必要があり、その配列を反復処理したいのでquestionListをスプライスしていないので、あなたはmaxに毎回リーチnの値をリセットする必要があります再度の最後まで到達した後：

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>

出典

2017-05-27 10:44:03

ありがとうございましたまさに私が探していたものです。 – Frank

@Frankもしそうなら、それを受け入れて投票してください。事前に感謝します –

Javascript：配列内の項目をループする

答えて

関連する問題