クリックごとにJavascript配列の表示ボタン

Question

HTMLとJS ....「新しいボタンを作成」ボタンをクリックするたびに配列値が1つずつ表示される必要があります。今すぐクリックすると、配列の各ボタンが表示されます。

<div class="container"> 
    <button onClick="myPar()">Directions</button> 
    <button onClick="make()">Create New Button</button> 
</div> 

<script> 
    function myPar() { 
    var pgp = document.createElement("p"); 

    var txt = document.createTextNode('Click on the "Create New Button" to reveal up to 10 links!!!'); 

    pgp.appendChild(txt); 

    document.body.appendChild(pgp); 
    } 

    function make(){ 
    sit = new Array("kilroerock.com","ultimateguitar.com","premierguitar.com","jhspedals.com","sweetwater.com","guitarcenter.com","musiciansfriend.com","patriots.com","bostonceltics.com") 

    for (i=0;i<=sit.length-1;i++){ 
     var btn = document.createElement("input"); 

     btn.setAttribute("value",sit[i]); 

     btn.setAttribute("type","button"); 

     btn.setAttribute("style","background:#1B0D0D;color:white"); 

     btn.setAttribute("onClick","document.location='http://www." + sit[i] + "'") 

     document.body.appendChild(btn); 
    } 
    } 
</script> 

Answer 1

クリックごとに配列全体が反復されます。代わりにforループのちょうどその後、各クリックでsit[currentIndex]は、あなたの必要性につき、それを使用し、その後currentIndex

var currentIndex = 0; 
sit = new Array("kilroerock.com","ultimateguitar.com","premierguitar.com","jhspedals.com","sweetwater.com","guitarcenter.com","musiciansfriend.com","patriots.com","bostonceltics.com") 

function make(){ 
    if (currentIndex < sit.length) 
    { 
     var btn = document.createElement("input"); 
     btn.setAttribute("value",sit[currentIndex]); 
     btn.setAttribute("type","button"); 
     btn.setAttribute("style","background:#1B0D0D;color:white"); 
     btn.setAttribute("onClick","document.location='http://www." + sit[currentIndex] + "'") 
     document.body.appendChild(btn);  

     currentIndex++; 
    } 
} 

1だけ

Here is a working exampleを上げる取得するには、関数の外currentIndex変数を保持します。

Answer 2

既存のコードに基づく最も単純なルートは、「カウンタ」を実装することです。

// Initialize the counter outside of all functions, set to zero 
 
var buttonIndex = 0; 
 

 
function myPar() { 
 
    var pgp = document.createElement("p"); 
 

 
    var txt = document.createTextNode('Click on the "Create New Button" to reveal up to 10 links!!!'); 
 

 
    pgp.appendChild(txt); 
 

 
    document.body.appendChild(pgp); 
 
} 
 

 
function make() { 
 
    sit = new Array("kilroerock.com", "ultimateguitar.com", "premierguitar.com", "jhspedals.com", "sweetwater.com", "guitarcenter.com", "musiciansfriend.com", "patriots.com", "bostonceltics.com") 
 

 
    // Only add the button if within the array length 
 
    if (buttonIndex < sit.length) { 
 
    var btn = document.createElement("input"); 
 

 
    // Modify this line to use buttonIndex, not i 
 
    btn.setAttribute("value", sit[buttonIndex]); 
 

 
    btn.setAttribute("type", "button"); 
 

 
    btn.setAttribute("style", "background:#1B0D0D;color:white"); 
 

 
    // Modify this line to use buttonIndex, not i 
 
    btn.setAttribute("onClick", "document.location='http://www." + sit[buttonIndex] + "'") 
 

 
    document.body.appendChild(btn); 
 

 
    // Increment the buttonIndex 
 
    buttonIndex++; 
 
    } 
 
}

<div class="container"> 
 
    <button onClick="myPar()">Directions</button> 
 
    <button onClick="make()">Create New Button</button> 
 
</div>

Answer 3

あなたはここで、この ような何かを期待しているアレイにアクセスする前に、次に例に https://plnkr.co/edit/juTx9sEZ4PhAoDrb2uHM?p=preview

function buttonClick(){ 
    var length = sit.length; 

     if(i<length){ 
     var btn = document.createElement("input"); 

     btn.setAttribute("value",sit[i]); 

     btn.setAttribute("type","button"); 

     btn.setAttribute("style","background:#1B0D0D;color:white"); 

     btn.setAttribute("onClick","document.location='http://www." + sit[i] + "'") 


     document.body.appendChild(btn); 
     i++;} 
}