Dynamicky vytvárať tlačidlá v jazyku javascript - javascript, html, css

Snažím sa dynamicky vytvárať niektoré tlačidlá z databázy v JavaScripte, každé tlačidlo je však vytvorené so správnym vnútorným HTML, ale každé má rovnakú udalosť onClick.

Každé tlačidlo má udalosť onClick, ktorú by malo mať posledné tlačidlo.

        var counter = 0;
var name = "";
var buttonAmount = 0;
data.Result.forEach(function(o)
{
name = data.Result[counter].buttonName;
buttonAmount = data.Result[counter].buttonAmount;
buttonAmount = Number(buttonAmount);
var button = document.createElement("button");
button.innerHTML = name;
button.onclick = function(){
total(buttonAmount);
}
document.body.append(button);
counter ++;
console.log(buttonAmount);
});

odpovede:

Problém je v tom, že buttonAmount je vymedzený na vonkajší blok, takže všetky odkazy na ňu budú odkazovať na rovnaké číslo / hodnotu. Deklarovať buttonAmount namiesto vo vnútri bloku forEach:

data.Result.forEach(function(o) {
const name = data.Result[counter].buttonName;
const buttonAmount = Number(data.Result[counter].buttonAmount);

Toto sa deje, ako deklarujete var buttonAmount = 0; mimo iteráciu poľa, ktorá je v globálnom rozsahu, je potrebné vložiť vyššie uvedené vyhlásenie do data.Result.forEach(function(o) čo je miestny rozsah.

    var counter = 0;
var name = "";

//var buttonAmount = 0; **Remove from here**

data.Result.forEach(function(o)
{
var buttonAmount = 0;// Add here
name = data.Result[counter].buttonName;
buttonAmount = data.Result[counter].buttonAmount;
buttonAmount = Number(buttonAmount);
var button = document.createElement("button");
button.innerHTML = name;
button.onclick = function(){
total(buttonAmount);
}
document.body.append(button);
counter ++;
console.log(buttonAmount);
});