Question

这是一个Sudoko生成器，我用vanilla javascript进行编程：

如果单击其中一个字段，将显示一个弹出窗口，其中包含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时属于另一个范围。如何将z传递给另一个函数？

Answer 1

问题＃1

分配给GlobalEventHandlers.onclick的事件处理函数只会在调用时传递一个参数。

, z

没有第二个论点，在这里摆脱z。

问题＃2

因为在该元素收到click事件之前不会执行onclick函数，所以需要将for循环的主体包装在一个立即调用的函数表达式¹ ^， {中{3}}为循环的每次迭代创建一个新的词法范围。

这使得事件处理程序上下文中的z在循环的当前迭代中引用z的值，而不是在最后一次迭代时引用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);的值。循环。

²

{{1}}

Vanilla Javascript：在函数中使用时for循环的计数器变量undefined

1 个答案:

问题＃1

问题＃2