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