每次单击时显示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++;}
}