Here's my code:

var never = [1,2,3,4,7];

function please () {
  for (var i = 0; i < never.length; i++) {
    document.getElementById("more").innerHTML = "<button>" + never[i] + "</button>";
  }
}

I have a button in my HTML that invokes this function but it only creates a button for the last item (7). How can I create a different button for each one of the items in the array? Any help is appreciated.

Here's my code:

var never = [1,2,3,4,7];

function please () {
  for (var i = 0; i < never.length; i++) {
    document.getElementById("more").innerHTML = "<button>" + never[i] + "</button>";
  }
}

I have a button in my HTML that invokes this function but it only creates a button for the last item (7). How can I create a different button for each one of the items in the array? Any help is appreciated.

• javascript
• for-loop
• button
• innerhtml

• 2 You are resetting the innerHTML after each iteration. You need to add + like this document.getElementById("more").innerHTML += "<button>" + never[i] + "</button>"; – Gacci Commented Feb 25, 2018 at 20:02

2 Answers 2

The best way is to append created buttons in container.Each by each

var never = [1,2,3,4,7];

function please () {
  var more=document.getElementById("more");
  for (var i = 0; i < never.length; i++) {
    var butt=document.createElement("button");
    butt.innerHTML=never[i];
    more.appendChild(butt);
  }
}

By appending to innerHTML instead of assigning, like

var never = [1,2,3,4,7];

function please () {
  for (var i = 0; i < never.length; i++) {
    document.getElementById("more").innerHTML += "<button>" + never[i] + "</button>";
  }
}

please();

<div id="more">
</div>