Question

我试图在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.log(buttonAmount);
        });

Answer 1

问题是buttonAmount的作用域是外部块，因此对它的所有引用都将引用相同的数字/值。而是在forEach块内声明buttonAmount：

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

Answer 2

当你在全局范围内的数组迭代之外声明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.log(buttonAmount);
    });

在javascript中动态创建按钮

2 个答案: