Я пытаюсь динамически создавать некоторые кнопки из базы данных в javascript, однако каждая кнопка создается с правильным innerHTML, но каждая имеет одно и то же событие onClick.
Каждая кнопка имеет событие onClick, которое должна иметь последняя кнопка.
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.info(buttonAmount);
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Проблема в том, что buttonAmount привязан к внешнему блоку, поэтому все ссылки на него будут ссылаться на одно и то же число / значение. Вместо этого объявите buttonAmount внутри блока forEach:
data.Result.forEach(function(o) {
const name = data.Result[counter].buttonName;
const buttonAmount = Number(data.Result[counter].buttonAmount);
Это происходит, когда вы объявляете var buttonAmount = 0; за пределами итерации массива, которая находится в глобальной области, приведенный выше оператор необходимо поместить внутри data.Result.forEach(function(o), который является локальной областью.
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.info(buttonAmount);
});