Javascript array display buttons on each click

Question

HTML and JS....I need the array values to be displayed one by one on each click of the "create new button" button. Right now when I click it displays each button in the array???

<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

You are iterating the whole array on every click. Instead of the for loop just hold a currentIndex variable outside of the function, then on each click get the sit[currentIndex] , use it per your need and afterwards raise the currentIndex by 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++;
    }
}

Here is a working example .

Answer 2

Simplest route based on your existing code is to implement a "counter".

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

Are you expecting something like this Here s working example 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++;}
}