如何在动态创建的输入上使用 getElementById？答案

【问题标题】：How do I use getElementById on dynamically created inputs?如何在动态创建的输入上使用 getElementById？
【发布时间】：2020-01-21 23:16:19
【问题描述】：

我在获取动态创建的复选框的状态时遇到了一些麻烦。我使用下面的代码向正文添加了几个带有动态 ID 的复选框。

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    html +=
    `
        <label class="checkbox" [attr.for]="'myCheckboxId' + i">
            <input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

在代码的另一部分，我想获取和/或设置复选框的状态，但到目前为止还没有成功。我尝试使用下面的代码来实现我的目标，但“document.getElementById(...)”一直返回“null”。

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById("'myCheckboxId' + i").checked);
}

如您所见，我想将复选框状态保存在一个数组中并使用它来将新状态重置为旧状态（例如按下按钮时）。

那么我应该如何将状态添加到这个缓冲区数组中？我在上面的代码中做错了什么？尝试了其他几种方法，但都没有奏效。

【问题讨论】：

标签： javascript html input dynamic getelementbyid

【解决方案1】：

您的代码中似乎只有一个简单的错误。您正在尝试做的事情会影响到：

id=myCheckboxName1
id=myCheckboxName2
id=myCheckboxName3
...

但是，您的代码不正确：

<input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">

它将整个 id 解释为一个字符串，而不是插入数值，所以它看起来像这样：myCheckboxIdi

或许可以尝试以下方法：

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    var checkboxId = `myCheckboxId${i}`;
    html +=
    `
        <label class="checkbox" [attr.for]=${checkboxId}>
            <input class="checkbox__input" type="checkbox" [name]=${checkboxId} [id]=${checkboxId}>
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

注意现在值是如何通过模板字符串插入到字符串中的？这应该可以，但我没有运行它，所以它可能需要一些修改。您的新访问代码类似于：

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById(`myCheckboxId${i}`).checked);
}

对此有影响的东西应该可以修复您的代码。如果您需要更多说明，请告诉我。

【讨论】：

您好 Jarred，感谢您的回复。问题仍然存在。我认为这可能是由于输入尚未初始化？不知道它是如何工作的，因为我在 JS 中拥有的所有经验都是我正在从事的这个项目。这是我刚刚用我的所有代码制作的小提琴：https://jsfiddle.net/Maximo40000/uedfgt6m/。虽然它似乎不起作用，但不知道为什么。单击按钮后，您应该会看到一个弹出窗口。
从我在这里看到的情况来看，甚至没有一个复选框被渲染。也许在遍历选中的字段之前尝试让它工作可能是一个很好的完整性检查。
对不起。我现在可以正常工作了，之前无法让小提琴正常工作（这是我第一次使用它）。我通过将 JS 内容放在 HTML 中的脚本中来实现它：jsfiddle.net/Maximo40000/uedfgt6m/28。单击“更改”按钮后，应该会出现一个包含几个复选框等的窗口。请注意，窗口上的“确定”和“取消”按钮不起作用。这是因为他们的处理程序当前包含“getElementById”，它仍然返回“null”。（见第 142 - 149 和 159 - 164 行）
代码中的问题是您仍在将变量checkBoxId 作为字符串传递。请注意在我的示例中我如何使用模板字符串？您将整个内容放入变量中，但没有重新应用模板来放置变量。这是我所做的：<input class="checkbox__input" type="checkbox" [name]=checkBoxName [id]=${checkBoxId}> 这是你所做的：<input class="checkbox__input" type="checkbox" [name]=checkBoxName [id]=checkBoxId> 你注意到区别了吗？
这对我来说部分是一个错误，对此我深表歉意。更新我的答案。

【解决方案2】：

好的，我找到了解决方案。显然您不能使用 getElementById(checkboxId) 来获取复选框状态。您必须使用 getElementsByTagName("input") 创建一个数组，然后在检查复选框类型的输入时遍历该数组。

var inputsArray = document.getElementsByTagName("input");
var ckbStateBuffer = new Array();

for (var i = 0; i < 3; i++)
{

    if(inputsArray[i].type == "checkbox")
    {

        ckbStateBuffer.push(inputsArray[i].checked);

    }

}

这里的JSFiddle：https://jsfiddle.net/Maximo40000/agL9opq6/

非常感谢贾里德·帕尔！

【讨论】：