2016-09-07 43 views
-1
<!DOCTYPE html> 
<html> 
<body> 
<p>The best way to loop through an array is using a standard forloop:</p> 
<label id="lab"/> 
<button onclick="myfunc()">ok</button> 

<script> 
    function myfunc() { 
     fru = ["Banana", "Orange", "Apple", "Mango"]; 
     for (i = 0; i < fru.length; i++) { 
      document.getElementById("lab").innerHTML = fru[i]; 
     } 
    } 
</script> 

</body> 
</html> 

我想單擊按鈕時顯示標籤。我已經在數組中存儲了5個值。點擊按鈕時如何顯示這些數組值如何在innerhtml的javascript中一個一個地顯示數組值?

如果我點擊一次,它會顯示第一個標籤,在我第二次點擊它時會顯示第二個標籤。

+0

所以會發生什麼以前的元素?它會被顯示還是會被覆蓋? – brk

+0

它會直接顯示最後一個值 –

回答

-1

使用全局變量作爲計數器來存儲點擊次數並提供此計數器值作爲數組的索引以顯示元素。這將通過一個顯示值一個你點擊

<script> 
var counter=0; 
function myfunc(){ 
    fru = ["Banana", "Orange", "Apple", "Mango"]; 

    if(counter == fru.length) 
    counter = 0; //reset index once end of array is reached 
    document.getElementById("lab").innerHTML = fru[counter]; 
    counter++; 
} 
</script> 
+0

它不工作will.it會直接顯示第二個值 –

+0

檢查編輯..計數器變量的增量應顯示後 –

+0

其顯示第5個未定義它是什麼/// –

0

你必須把varibale的function之外。也許arraycounter variable。這取決於你。一種方法是使用splice縮小每clickarray並輸出第一個值。

var fru = ["Banana", "Orange", "Apple", "Mango"]; 
 

 
function myfunc() { 
 
    document.getElementById("lab").innerHTML += fru.splice(0, 1); 
 
}
<label id="lab" /> 
 
<button onclick="myfunc()">ok</button>

+0

當我點擊一個按鈕時顯示雙倍數值 –

+0

什麼?哪裏?它不這樣做! @KalaiPrakash – eisbehr

0

HTML

<p>The best way to loop through an array is using a standard forloop:</p> 
<label id="lab"></label> 

<button onclick="myfunc()">ok</button> 

JAVASCRIPT

var counter=0; 
function myfunc() { 
    fru = ["Banana", "Orange", "Apple", "Mango"]; 
    var _innerString = ''; 
    if(fru.length>counter){ 
    _innerString = fru[counter]+('<br>'); 
    counter++; 
    }else{ 
    counter=0; 
    alert("Array Reset"); 
    } 

document.getElementById("lab").innerHTML =_innerString; 
} 
相關問題