如何正确使用for循环在按钮数组中添加onclick函数？

Question

我正在制作一种HTML计算器来测试我想到的东西。 我使用了for循环来创建键盘的按钮。 显示是一个文本字段。 然后，我使用了for循环将功能添加到按钮中：

for (var i = 0; i < 10; i++)
{
    buttons[i].onclick = function()
    {
        display.value += i;
    };
}

我试图做的是例如使button [0]在单击时将“ 0”添加到文本字段的值。 相反，单击任何按钮都会在文本字段中添加“ 10”。 为什么？ 我该怎么做？

Answer 1

你几乎得到它的权利，你只需要改变var来let你的循环声明：

 for (let i = 0; i < 10; i++)
{
    buttons[i].onclick = function()
    {
        display.value += i;
    };
}

使用“ let”和“ var”有什么区别？ 在这里您可以获取有关您的问题的更多信息。

Answer 2

您的问题是您直接在绑定到Button的函数中引用i 。 即使绑定了所有事件， i实际上仍将继续存在，并且它的值将是迭代10的最后一个值。 因此，每当单击函数运行时，它都会查找i并找到您设置的最后一个值（ 10 ）并采用该值。 你想要做的是增加一个恒定的引用，而不是-让您绑定的循环过程中，你有一个价值，并保持该基准永远，无论怎样i可能会在以后更改。

for (var i = 0; i < 3; i++) {
    const localValue = i
    buttons[i].onclick = function()
    {
        counter += localValue;
        counterElement.innerHTML = counter
    };
}

我在此处创建了一个小示例提琴： https : //jsfiddle.net/4k8cds9n/如果运行该提琴，您应该会看到按钮的作用。 与该主题相关的一些阅读将围绕javascript的范围进行，一篇不错的文章： https : //scotch.io/tutorials/understanding-scope-in​​-javascript