配列の次の要素にアクセスできない

Question

私はJSの新機能ですが、onclick関数を使用して配列の次の要素にアクセスしようとしていますが、運はありません。

var i, len; 
 
     
 
    function quiz() { 
 
    var quiz_questions = [ 
 
    "who is the founder of facebook?", 
 
    "who is the founder of google?" 
 
    ]; 
 
      
 
    len = quiz_questions.length; 
 

 
    for(i = 0; i < len; i++) { 
 
    document.getElementById("demo").innerHTML = quiz_questions[i]; 
 
    } 
 
}

<button onclick="quiz();">Click</button> 
 
<p id="demo"></p>

誰もがここで私が間違っていたものを私に説明することができます。

Answer 1

問題は、クリックするたびにすべての質問を繰り返すことです。 forループを削除し、質問を設定してからi ++を入れてください。たぶんチェック、もし私がそれの前に配列の長さ未満の場合、悪い考えではないでしょう。

var i, len; 
 
i = 0; 
 
     
 
    function quiz() { 
 
    var quiz_questions = [ 
 
    "who is the founder of facebook?", 
 
    "who is the founder of google?" 
 
    ]; 
 
      
 
    len = quiz_questions.length; 
 

 
    document.getElementById("demo").innerHTML = quiz_questions[i]; 
 
    i++; 
 
    if(i>=len){ 
 
     i=0; 
 
    } 
 
}

<button onclick="quiz();">Click</button> 
 
<p id="demo"></p>

Answer 2

あなたのjavascriptの変化のように行います。

var quiz_questions = [ 
"who is the founder of facebook?", 
"who is the founder of google?" 
]; 

var counter = 0; 

function quiz() 
{ 
counter++; 
document.getElementById("demo").innerHTML = quiz_questions[counter-1]; 
} 

Answer 3

この文は、代わりにあなたがする必要がありますデモのdiv

document.getElementById("demo").innerHTML = quiz_questions[i]; 

の値を上書きしていきます変数に質問を追加してからそれを追加するo div。このようにして、両方の質問が部門に追加されます

var i, len; 

function quiz() { 
var quiz_questions = [ 
"who is the founder of facebook?", 
"who is the founder of google?" 
]; 

len = quiz_questions.length; 
var htmlContent = ""; 
for(i = 0; i < len; i++) { 
    htmlContent = htmlContent + quiz_questions[i] + "<br>"; 
} 
    document.getElementById("demo").innerHTML = htmlContent; 
}