This question already has answers here:
JavaScript closure inside loops – simple practical example
(44个答案)
在10个月前关闭。
我写了以下HTML。我的想法是,我可以将项目添加到顶部的列表中,然后生成一个包含名称,复选框和文本字段的字段。取决于复选框,文本字段将被启用/禁用。在我的JavaScript中,切换功能已分配给复选框字段的onclick属性,但仅适用于列表中的最后一项。谁能说说为什么没有将此功能分配给所有复选框?如果在浏览器中打开生成的html代码,则除最后一个复选框外,其他任何复选框均未显示onclick事件,因此似乎未添加该复选框。当我将其分配给下一个时,它会以某种方式从上一个中删除吗?我该如何解决?谢谢。
(44个答案)
在10个月前关闭。
我写了以下HTML。我的想法是,我可以将项目添加到顶部的列表中,然后生成一个包含名称,复选框和文本字段的字段。取决于复选框,文本字段将被启用/禁用。在我的JavaScript中,切换功能已分配给复选框字段的onclick属性,但仅适用于列表中的最后一项。谁能说说为什么没有将此功能分配给所有复选框?如果在浏览器中打开生成的html代码,则除最后一个复选框外,其他任何复选框均未显示onclick事件,因此似乎未添加该复选框。当我将其分配给下一个时,它会以某种方式从上一个中删除吗?我该如何解决?谢谢。
<!DOCTYPE html>
<html>
<body onload="loadAllSettings()" }>
<script>
var genOptFields = ["genField1", "genField2"];
function loadAllSettings() {
loadSettingsList("genSet", genOptFields);
}
</script>
<h2>Options</h2>
<form>
<fieldset id="genSet">
<legend>General</legend>
</fieldset>
</form>
<script>
function loadSettingsList(parentId, optionalFields) {
var fieldset = document.getElementById(parentId);
for (fieldId of optionalFields) {
var p = document.createElement('p');
p.append(fieldId + ":");
var input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.id = fieldId;
var cb = document.createElement('input');
cb.type = "checkbox";
cb.id = "cb_" + fieldId;
cb.addEventListener("click", function () {
toggleCheck(fieldId);
});
p.appendChild(cb);
p.appendChild(input);
fieldset.appendChild(p);
}
}
function toggleCheck(fieldId) {
document.getElementById(fieldId).disabled = !document.getElementById("cb_" +
fieldId).checked;
}
</script>
</body>
</html>
最佳答案
如下所述,您的fieldId引用不是静态的。因此,调用切换检查时,无论如何,它总是传递fieldId包含的最后一个值(通过console.logging进行双重检查。
function loadAllSettings() {
const genOptFields = ["genField1", "genField2"];
loadSettingsList("genSet", genOptFields);
}
function loadSettingsList(parentId, optionalFields) {
const fieldset = document.getElementById(parentId);
optionalFields.forEach(function (fieldId) {
createParagraph(fieldId, fieldset);
});
}
function createParagraph(fieldId, fieldset) {
const p = document.createElement('p');
p.append(fieldId + ":");
createCheckbox(p, fieldId);
createInputField(p, fieldId);
fieldset.appendChild(p);
}
function createInputField(p, fieldId) {
const input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.id = fieldId;
p.appendChild(input);
}
function createCheckbox(p, fieldId) {
const cb = document.createElement('input');
cb.type = "checkbox";
cb.id = "cb_" + fieldId;
//set this attribute to capture value
cb.setAttribute('data-fieldId', fieldId);
cb.addEventListener("click", function () {
//use static data attribute value instead of fieldId var which isnt static
toggleCheck(this.getAttribute('data-fieldId'));
});
p.appendChild(cb);
}
function toggleCheck(fieldId) {
document.getElementById(fieldId).disabled = !document.getElementById("cb_" + fieldId).checked;
}
<!DOCTYPE html>
<html>
<body onload="loadAllSettings()" }>
<h2>Options</h2>
<form>
<fieldset id="genSet">
<legend>General</legend>
</fieldset>
</form>
</body>
</html>