为什么onclick只被分配给最后一个对象?

我试图分配一个onclick函数的某种类型的项目。因此，在for循环中，我有if(invType[i] != "empty")然后在if语句中，我有

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

只有最后一个"usable"对象获得onclick函数。每个人都把我和这个问题联系在一起，但这对我没有帮助。我什么都试过了，就是不明白。有人能给我一个更好的解释，这意味着什么，我怎么能让我的代码工作?

JSFiddle

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

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);
            }
        }
    }
}