我对javascript非常陌生，并尝试创建一个动态html表单，该表单中有多个按钮，每个按钮的单击都映射到相应的表单输入。这是我的代码：
<html>
<head>
<title>Create Group</title>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#generate_form").click(function(){
var number = document.getElementById("number_of_groups").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
var i;
for (i=1;i<=number;i++){
var p = document.createElement("p");
var node = document.createTextNode("group " + i + " :");
p.appendChild(node);
container.appendChild(p);
var input = document.createElement("input");
input.type = "text";
var thisID = 'group_'+i;
input.id = thisID;
input.name=thisID;
container.appendChild(input);
var button = document.createElement("button");
button.id = "button_"+i;
button.type = "button";
container.appendChild(button);
button.onclick = function(){ document.getElementById(thisID).value = "hello world";};
var buttonLabel = document.createTextNode("Generate");
button.appendChild(buttonLabel);
container.appendChild(document.createElement("br"));
}
})
});
</script>
</head>
<body>
<h2>Create some group(s)</h2>
<br>
Create <input type="text" id="number_of_groups" name="number_of_groups" value="1"> group(s).
<button id="generate_form" type="button">GO</button>
<div id="container"/>
</body>
</html>`
因此，用户将输入要创建的组数，然后单击“开始”按钮，然后代码应使用用户选择的编号动态生成表单。表单的每个组都包含一个输入文本框和一个“生成”按钮。单击该按钮时，输入文本框将显示“ hello world”。但是，无论我单击哪个“生成”按钮，“ hello world”仅显示在最后一个输入文本框中。因此，我将按钮的onclick功能更改为：
button.onclick = function(){ alert(thisID);};
然后，我发现thisID始终是最后一个输入文本框的ID，无论我单击哪个“生成”按钮。我猜这是因为在'thisID'始终是其最新值时，直到脚本完成后，单击事件的绑定才会发生。
[任何人都可以帮助我实现我想要的功能吗？非常感谢！
您将需要在for循环中将代码包装在一个单独的函数中，并传入i的值作为参数。这将创建一个闭包，为您的代码创建一个新的执行范围。否则，正在发生的事情是您的var被吊起，并且不是for循环的每次迭代所独有的，因此您的DOM仅反映了它被分配的最后一个值。
for (i=1;i<=number;i++){
(function (i) {
var p = document.createElement("p");
var node = document.createTextNode("group " + i + " :");
p.appendChild(node);
container.appendChild(p);
var input = document.createElement("input");
input.type = "text";
var thisID = 'group_'+i;
input.id = thisID;
input.name=thisID;
container.appendChild(input);
var button = document.createElement("button");
button.id = "button_"+i;
button.type = "button";
container.appendChild(button);
button.onclick = function(){ document.getElementById(thisID).value = "hello world";};
var buttonLabel = document.createTextNode("Generate");
button.appendChild(buttonLabel);
container.appendChild(document.createElement("br"));
})(i);
}
您可以在此处查看有关闭包的文章：https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36