Динамически создавать кнопки в javascript

Я пытаюсь динамически создавать некоторые кнопки из базы данных в 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);
        });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
49
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема в том, что 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);
    });

Другие вопросы по теме