2016-09-07 2 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의 자바 스크립트에서 배열 값을 하나씩 표시하는 방법은 무엇입니까?

한 번 클릭하면 첫 번째 레이블이 표시되고 두 번째 클릭하면 두 번째 레이블이 표시됩니다.

+0

그래서 이전 요소에 어떤 일이 일어날 자바 스크립트? 그것은 여전히 ​​보여 주거나 그것을 쓸 것인가? – brk

+0

그것은 바로 마지막 값을 표시합니다. –

답변

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

will will not는 직접적으로 두 번째 값을 표시합니다. –

+0

체크 편집 .. 카운터 변수의 증가는 표시되어야합니다. –

+0

표시 중 5 번째가 정의되지 않았 음 /// –

0

을 클릭 이것은 하나의 값을 보여줍니다. 어쩌면 array 또는 counter variable 일 수 있습니다. 이것은 당신에게 달려 있습니다. 한 가지 방법은 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>

+0

버튼을 클릭하면 이중 값이 표시됩니다. –

+0

무엇? 어디에? 그것은하지 않습니다! @ 칼라이 프라 카시 – 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> 

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; 
} 
관련 문제