無法訪問數組的下一個元素javascript

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]; 

相反，你需要的價值將問題附加到一個變量，然後添加它分區。這樣，兩個問題都會被添加到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; 
}