How to build dynamic buttons with unique actions

Asked Jan 19 '15 at 07:36

Active Jan 19 '15 at 07:36

Viewed 21 times

I am building a GUI that pulls in information from a JSON file and populates divs on the screen. I have buttons that are being dynamically created and they all have their own unique ID's (ex: button1, button2, button3, etc. etc.) I want each of these buttons to pass unique information to separate div based on its corresponding information pulled from the JSON. I hope that makes sense.

As I am looping through the JSON I am building the buttons like:

var viewBtn = document.createElement("button");
viewBtn.setAttribute("class", "button");
viewBtn.setAttribute("id", "button" + i);
viewBtn.innerHTML = "View More";
viewBtn.onclick = function()
{
  uniqueAction(i);
}
product.appendChild(viewBtn);

}

Right now every button is storing the last number passed by the for loop. Thanks ahead of time for any help anyone can lend!!

asked Jan 19 '15 at 07:36

NightMarcher

Where are you getting these unique actions from? Are they stored in the JSON? – rioc0719 Jan 19 '15 at 07:37
Missing closures, duplicate of infamous loop issue ! – adeneo Jan 19 '15 at 07:38
To be clearer, by the time you click the element, the loop has finished and the value of `i` inside the `onclick` event handler is the last value `i` was set to. – adeneo Jan 19 '15 at 07:40
@rioc0719 I have a separate function that I build that will change the information based on the information I am pulling from the JSON. I am telling it to move positions in the array when I parse through the data. – NightMarcher Jan 19 '15 at 07:41
i dont see any loop in the code – chiliNUT Jan 19 '15 at 07:41
@adeno can you tell me how to make each button unique? – NightMarcher Jan 19 '15 at 07:43
@chiliNUT this is just the piece of code that builds the button. This is all nested in a for loop. – NightMarcher Jan 19 '15 at 07:43

How to build dynamic buttons with unique actions

0 Answers0