Javascript 关于创建动态按钮但无法给出正确值的循环_Javascript_Loops_For Loop

Javascript 关于创建动态按钮但无法给出正确值的循环

javascript loops for-loop

Javascript 关于创建动态按钮但无法给出正确值的循环,javascript,loops,for-loop,Javascript,Loops,For Loop,可能重复：我有一个小问题，如果你们中的一些人能够意识到这里缺少什么样的逻辑，那将是非常好的，因为我似乎找不到它：我有一个数组，其中包含以前某个操作的结果。假设数组是： var results = [0, 1]; 然后我有一堆代码，我在其中创建了一些按钮，在for循环中，我根据数组的位置为这些按钮分配了不同的函数。问题是，出于某种原因，在本例中创建两个按钮的所有按钮都带有分配给数组最后一个值的函数。在本例中，两个按钮都将作为一个按钮出现，而不是第一个按钮为0，第二个按钮为1 代码如下： f

可能重复：

我有一个小问题，如果你们中的一些人能够意识到这里缺少什么样的逻辑，那将是非常好的，因为我似乎找不到它：

我有一个数组，其中包含以前某个操作的结果。假设数组是：

var results = [0, 1];

然后我有一堆代码，我在其中创建了一些按钮，在for循环中，我根据数组的位置为这些按钮分配了不同的函数。问题是，出于某种原因，在本例中创建两个按钮的所有按钮都带有分配给数组最后一个值的函数。在本例中，两个按钮都将作为一个按钮出现，而不是第一个按钮为0，第二个按钮为1

代码如下：

for (var i = 0; i < results.length; i++) {
    var br2 = b.document.createElement("br");
    var reslabel = b.document.createTextNode(Nom[results[i]].toString());
    var card = document.createElement("input");
    card.type = "button";
    id = results[i]; // this is the problematic value. 
    card.onclick = newcard; // this function will use the above value.
    card.value = "Show card";
    divcontainer.appendChild(br2);
    divcontainer.appendChild(reslabel);
    divcontainer.appendChild(card);
}

函数generate将使用id生成一些内容。没什么问题，它生成的内容很好，只是id总是设置为数组中的最后一项。

在继续之前，非常感谢bfavaretto解释了一些我完全无法理解的范围微妙之处。似乎除了你遇到的问题之外，你还受到范围界定的困扰，这在我试图构思答案时咬了我一口

无论如何，这里有一个有效的例子。我正在使用forEach，某些浏览器可能不支持它。然而，它确实回避了一些给你带来悲伤的范围界定问题：

<html>
<body>
<script>
var results = [0,1];
results.forEach( function(result) {
    var card = document.createElement("input");
    card.type = "button";
    card.onclick = function() {
        newcard( result );
    } 
    card.value = "Show card";
    document.body.appendChild(card);
}); 

function newcard(x) {
   alert(x);
}
</script>
</body>
</html>

如果您决定坚持使用传统循环，请参阅bfavaretto的答案

在继续之前，非常感谢bfavaretto解释了一些我完全无法理解的范围界定的微妙之处。似乎除了你遇到的问题之外，你还受到范围界定的困扰，这在我试图构思答案时咬了我一口

无论如何，这里有一个有效的例子。我正在使用forEach，某些浏览器可能不支持它。然而，它确实回避了一些给你带来悲伤的范围界定问题：

<html>
<body>
<script>
var results = [0,1];
results.forEach( function(result) {
    var card = document.createElement("input");
    card.type = "button";
    card.onclick = function() {
        newcard( result );
    } 
    card.value = "Show card";
    document.body.appendChild(card);
}); 

function newcard(x) {
   alert(x);
}
</script>
</body>
</html>

如果您决定坚持使用传统循环，请参阅bfavaretto的答案

您的id是一个全局变量，当循环结束时，它被设置为数组上的最后一个值。当事件处理程序代码运行并请求id的值时，它将获得最后一个值

您需要创建一个闭包来捕获当前结果[i]并传递它。这是一个非常常见的陷阱，请参阅。由于newcard非常简单，并且id实际上在generate中使用，因此可以修改generate以将id作为参数。这样您就不再需要新卡了，您可以这样做：

card.onclick = (function(id) { 
    return function() { 
        window.document.getElementById("oldcard").innerHTML = "";
        generate(id);
    }; 
}(results[i]));

这样做的目的是定义并立即调用传递当前结果[i]的函数。它返回另一个函数，它将是实际的onclick处理程序。该函数可以访问称为闭包的外部函数的id参数。在循环的每次迭代中，将创建一个新的闭包，捕获每个单独的id供自己使用。

您的id是一个全局变量，当循环结束时，它将设置为数组上的最后一个值。当事件处理程序代码运行并请求id的值时，它将获得最后一个值

card.onclick = (function(id) { 
    return function() { 
        window.document.getElementById("oldcard").innerHTML = "";
        generate(id);
    }; 
}(results[i]));

这样做的目的是定义并立即调用传递当前结果[i]的函数。它返回另一个函数，它将是实际的onclick处理程序。该函数可以访问称为闭包的外部函数的id参数。在循环的每次迭代中，将创建一个新的闭包，捕获每个单独的id以供自己使用。

newcard的定义是什么？添加了newcard的定义您实际上不在newcard id=id中使用id，但id不起任何作用。你在generate中使用它吗？是的，我需要定义id值，因为generate将要求它。这不是链接问题的完全重复，尽管我最初认为它是，并投票关闭。投票决定重新开放。新卡的定义是什么？添加了新卡的定义您实际上没有在新卡id=id中使用id，但什么都不做。你在generate中使用它吗？是的，我需要定义id值，因为generate将要求它。这不是链接问题的完全重复，尽管我最初认为它是，并投票关闭。投票决定重新开业。解释得很好，多亏了你的解释，我看到了一些我做错了的事情。尽管如此，问题依然存在。我做的正是这样：更改onclick赋值和更改newcard的定义。但是我在onclick的函数中放了一个console.logid，它总是最后一个值。。。“我现在就停下来，明天我会重读你的答案并继续努力。”罗纳德·巴泽尔：那不行，因为1

id是全局的，2它正在生成中使用。后者也必须被传递一个id。3看起来你忘记创建实际的闭包了，你需要像card.onclick=functionid{return function{newcardd；}；}results[i]。@bfavaretto:实际上，你所展示的代码不会工作，因为你要给onclick分配一个参数的函数，而onclick需要一个没有参数的函数。然而，我显示的代码被破坏了，这很奇怪，因为我已经写了几十次这样的代码，没有问题。进一步看，看看我遗漏了什么…看我的答案格式更好。我实际上是在分配一个没有参数的函数作为事件处理程序，它实际上传递了一个参数，即我遗漏的事件对象。@bfavaretto实际上，我用完整的代码修改了我的答案。这是一个奇怪的循环…解释得很好，感谢你的解释，我看到了一些我做错的事情。尽管如此，问题依然存在。我做的正是这样：更改onclick赋值和更改newcard的定义。但是我在onclick的函数中放了一个console.logid，它总是最后一个值。。。我现在就停下来，明天我会重读你的答案并继续努力。@RonaldBarzell，这行不通，因为1个id是全局id，2个id正在生成中使用。后者也必须被传递一个id。3看起来你忘记创建实际的闭包了，你需要像card.onclick=functionid{return function{newcardd；}；}results[i]。@bfavaretto:实际上，你所展示的代码不会工作，因为你要给onclick分配一个参数的函数，而onclick需要一个没有参数的函数。然而，我显示的代码被破坏了，这很奇怪，因为我已经写了几十次这样的代码，没有问题。进一步看，看看我遗漏了什么…看我的答案格式更好。我实际上是在分配一个没有参数的函数作为事件处理程序，它实际上传递了一个参数，即我遗漏的事件对象。@bfavaretto实际上，我用完整的代码修改了我的答案。这是一个奇怪的循环…谢谢，我理解这个问题和你的解决方案，虽然我不能100%地使用它，因为我无法设置generate以获取参数，因为程序的其他部分需要这样的参数，但是以你的解释为起点，我将看看我能做什么。好吧，我让它在对你的示例进行最小更改的情况下工作。杰出的这真是太棒了。。。我会把这个答案加入书签，以备将来参考。谢谢，我理解这个问题和你的解决方案，虽然我不能100%使用它，因为我无法将generate设置为获取参数，因为程序的其他部分需要这样做，但以你的解释为起点，我会看看我能做什么。好的，我对你的例子做了最小的改动。杰出的这真是太棒了。。。我会把这个答案加入书签，以备将来参考。