Javascript 为什么onclick只分配给最后一个对象？

我正在尝试将onclick函数指定给特定类型的项。因此，在for循环中我有

if（invType[I]！=“empty”）

然后在if语句中我有

if(invType[i] == "usable"){
    (function(num) {
       document.getElementById(num).onclick = function(){useItem(invName[num],num)};
    })(i);
}

只有最后一个

“可用的”

对象才能获得onclick函数。每个人都在联系我，但这对我没有帮助。我什么都试过了，但我想不出来。有人能给我一个更好的解释，说明这一切意味着什么，以及我如何让我的代码工作吗

下面是添加所有按钮的完整代码：

function backpack(update) {
    i = 0;
    if (update != 1) {
        /*
                    tempA = document.getElementById("scene").innerHTML;
                    tempB = document.getElementById("textbox").innerHTML;
                    */
    }
    /*
                document.getElementById("textbox").innerHTML = '<br><br><input type="button" value="Close Backpack" onclick="closeBackpack()">';
                document.getElementById("scene").innerHTML = '<div id="backpack" style="height:400px; width:400px; background-image:url(files/sugame/sprites/backpackBackground.png); border-style:solid; border-width:8px; position:absolute; top:92px; left:192px"></div>';
                */
    for (i = 0; i < 9; i++) {
        if (invType[i] != "empty") {
            switch (i) {
                case 0:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:4px; top:4px;">';
                    break;
                case 1:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:136px; top:4px;">';
                    break;
                case 2:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:268px; top:4px;">';
                    break;
                case 3:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:4px; top:136px;">';
                    break;
                case 4:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:136px; top:136px;">';
                    break;
                case 5:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:268px; top:136px;">';
                    break;
                case 6:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:4px; top:268px;">';
                    break;
                case 7:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:136px; top:268px;">';
                    break;
                case 8:
                    document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:268px; top:268px;">';
                    break;
            }
            if (invType[i] == "usable") {
                (function (num) {
                    document.getElementById(num).onclick = function () {
                        useItem(invName[num], num)
                    };
                })(i);
            }
            if (invType[i] == "equipment") {
                document.getElementById(i).onclick = function (i) {
                    return function () {
                        equipItem(invName[i], i)
                    };
                }(i);
            }
        }
    }
}

功能背包（更新）{
i=0；
如果（更新！=1）{
/*
tempA=document.getElementById（“场景”）.innerHTML；
tempB=document.getElementById（“textbox”）.innerHTML；
*/
}
/*
document.getElementById（“textbox”）.innerHTML='

'；
document.getElementById（“场景”）.innerHTML=''；
*/
对于（i=0；i<9；i++）{
if（invType[i]！=“空”）{
开关（一）{
案例0：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例1：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例2：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例3：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例4：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例5：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例6：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例7：
document.getElementById（“背包”）.innerHTML+=''；
打破
案例8：
document.getElementById（“背包”）.innerHTML+=''；
打破
}
if（invType[i]=“可用”）{
（函数（num）{
document.getElementById（num）.onclick=function（）{
useItem（invName[num]，num）
};
})（i） )；
}
if（投资类型[i]=“设备”）{
document.getElementById（i）.onclick=function（i）{
返回函数（）{
设备项（invName[i]，i）
};
}（i） )；
}
}
}
}

问题在于将所有按钮添加到DOM的方式。你正在做：

document.getElementById("backpack").innerHTML += '<input type="button" value="' + invName[i] + '" id="' + i + '" style="position:absolute; left:4px; top:4px;">';

document.getElementById（“背包”）.innerHTML+=''；

这将重新解析整个DIV的HTML，因此旧按钮上的任何事件侦听器都将丢失

有两种简单的方法可以解决此问题：

使用

createElement

和

appendChild

等函数直接添加到DOM中，而不影响以前的元素，而不是连接HTML

使用两个循环：一个循环添加所有按钮，第二个循环添加事件侦听器

---

我注意到的另一件事与问题无关，那就是您忘记在函数中将

I

声明为局部变量。如果在循环内调用做相同事情的其他函数，这可能会导致问题，因为它们会影响外部循环

@WinterMute因为：好的，但我认为问题可能是id为'1'的元素；与有效的id@WinterMute在html5中，id的唯一规则是它必须至少包含1个字符，并且不能包含空格扫描。您制作了一个JSFIDLE来演示这个问题吗？您发布的代码看起来不错，问题可能在其他地方。可能是因为您的元素具有相同的ID，ID应该是唯一的…我可能误解了这一点，但我希望它替换旧按钮，然后在每次调用背包函数时添加新的事件侦听器，因为库存可以更改，然后我需要它在库存点有正确的按钮，并让该按钮执行适当的操作。在我的实际代码中，那些被注释掉的行没有被注释掉，因此div只在我执行backpack函数时存在。问题是每次通过循环都要替换整个div。因此，当您添加按钮1时，也可以重新创建按钮0。当您添加按钮2时，您将重新创建按钮0和1。等等。在循环之前删除旧的HTML是可以的，问题是在循环过程中也会这样做。但该代码只有在与switch（i）的大小写匹配时才会运行，所以每次应该只创建一个按钮，对吗？还是我误解了开关/机箱的工作原理？记住，

a+=b

只是

a=a+b

的缩写。