innerhtmlのjavascriptで配列値を1つずつ表示するにはどうすればいいですか？

-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つの値を格納しています。これらの配列の値をごとに1つずつ表示するにはボタンをクリックするとどうなりますか？innerhtmlのjavascriptで配列値を1つずつ表示するにはどうすればいいですか？

一度クリックすると最初のラベルが表示され、2回目のクリックで2番目のラベルが表示されます。

出典

2016-09-07 Kalai Prakash

ので、何が前の要素に起こるのだろうか？それはまだ表示されるか、それとも上書きされますか？ – brk

それは直接最後の値を直接表示します –

-1

カウンタとしてグローバル変数を使用してクリック数を格納し、このカウンタ値を配列のインデックスとしてインデックスに渡して要素を表示します。あなたはあなたがfunction外varibaleを配置する必要があり

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

出典

2016-09-07 06:36:14

will will notは直接第2の値を表示します –

チェックを編集します.. –

を表示した後にカウンタ変数を増やす必要があります5番目のものが未定義です/// –

をクリックして、これは1で値1が表示されます。たぶんarrayまたはcounter variableです。これはあなた次第です。 1つの方法はspliceを使用してarrayをすべてclickに縮小し、ちょうど最初の値を出力することです。

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

 
function myfunc() { 
 
    document.getElementById("lab").innerHTML += fru.splice(0, 1); 
 
}

<label id="lab" /> 
 
<button onclick="myfunc()">ok</button>

出典

2016-09-07 06:40:51 eisbehr

ボタンをクリックすると二重値が表示されます –

何ですか？どこ？それはしません！ @KalaiPrakash – eisbehr

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

出典

2016-09-07 06:52:34

innerhtmlのjavascriptで配列値を1つずつ表示するにはどうすればいいですか？

答えて

関連する問題