每次單擊時顯示Javascript數組顯示按鈕

Question

HTML和JS ....我需要在每次單擊“創建新按鈕”按鈕時一一顯示數組值。 現在，當我單擊它時，它將顯示數組中的每個按鈕？？？

<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循環，只需在函數外部保留currentIndex變量，然后每次單擊獲得sit[currentIndex] ，即可根據需要使用它，然后將currentIndex增大1。

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

這是一個工作示例 。

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