Vanilla Javascript：在函數中使用時，for循環的計數器變量未定義

Question

這是我在香草javascript中編程的Sudoko生成器：

的jsfiddle

看起來更好的全屏JSFiddle

如果單擊其中一個字段，將顯示一個彈出窗口，其中包含從1到9的3x3字段。如果您單擊彈出窗口f的其中一個字段。 恩。 5 ，應將父字段更改為5 。 問題在於它將父字段更改為undefined 。

這是我生成彈出窗口的相關代碼：

    // create popup
    function createPopup(position) {
        var popup = document.createElement('dialog');
        popup.className = 'popup';
        popup.id = 'window_' + position;

        var dialogblock = popup.appendChild(document.createElement('div'));
        dialogblock.className = 'popupblock';

        for (var z = 1; z <= 9; z++) {
            var div = dialogblock.appendChild(document.createElement('div'));

            div.className = 'popupcell';
            div.id = position + 'z' + z;
            div.appendChild(document.createTextNode(z));

            div.onclick = function (e, z) {
                document.getElementById(position).innerHTML = z;
                e.stopPropagation();
                popup.close();
            };
        }

        return popup;
    }

問題似乎是z傳遞給div.onclick時在另一個作用div.onclick 。 如何將z傳遞給另一個函數？

Answer 1

問題1

分配給GlobalEventHandlers.onclick的事件處理函數僅在調用時傳遞一個參數。

div.onclick = function (e, z)

沒有第二個參數，在這里擺脫, z 。

問題二

因為直到元件接收click事件的onclick功能不會被執行，你需要用身體的for循環中的立即調用的函數表達式^{1 ， 2} ，以創建循環的每個迭代一個新的詞匯范圍。

這使得z在事件處理的情況下參考價值z在循環而不是價值的當前迭代z在在循環的最后一次迭代。

的jsfiddle

for (var z = 1; z <= 9; z++) (function(z){

    var div = dialogblock.appendChild(document.createElement('div'));

    div.className = 'popupcell';
    div.id = position + 'z' + z;
    div.appendChild(document.createTextNode(z));

    div.onclick = function (e) {
        console.log(e, z);
        document.getElementById(position).innerHTML = z;
        e.stopPropagation();
        popup.close();
    };
})(z);