JS создал кнопки с параметрами для события пропущенного клика

Question

Я создаю некоторую кнопку в моем HTML из js, в зависимости от значения, полученного в качестве ввода.Итак, просто, если введено 5, я рисую 5 кнопок с текстом от 1 до 5.

Эти кнопки должны вызывать функцию, передающую в качестве ввода счетчик каждой кнопки (кнопка 1 передает 1 ввызванная функция, button2 передает 2, ...).

В этом проблема: все кнопки при вызове вызывают функцию с одним и тем же входом (в примере значение 5 для всех).

Почему?Это то, что я написал:

var toAdd = document.createDocumentFragment();
for (var i = 0; i < nErog; i++) {
    var newDiv = document.createElement('div');
    newDiv.id = 'e' + i;
    //newDiv.className = 'ansbox';
    newDiv.style.margin = "20px";
    newDiv.style.fontSize = "350%";
    newDiv.style.fontWeight = "bold";
    toAdd.appendChild(newDiv);
}
document.getElementById('erogs').appendChild(toAdd);

for (var i = 0; i < nErog; i++) {
    $("#e" + i).dxButton({
        text: i + 1,
        onClick: function () {
            RetrieveErogs(i+1);
        },
        height: "120px",
        width: "120px"
    });
}

где RetrieveErogs

function RetrieveErogs(erogatore) {
    alert(erogatore);
}

Все кнопки вызывают функции с одинаковым значением, так что я думаю, что что-то пропустило, определяя событие onClick, но что

Answer 1

Попробуйте заменить RetrieveErogs(i+1) на RetrieveErogs($(this).text())

ИЛИ, попробуйте использовать замыкание:

   (function(x){
      $("#e" + x).dxButton({
        text: (1+x),
        onClick: function () {
            RetrieveErogs(1 + x);
        },
        ...
      });
   })(i);