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

What's the difference between using "let" and "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

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

2 个答案: