Javascript GetElementById 将值设置为输入

Question

我正在尝试为我的输入设置值，但我想在数据结束时执行此操作。如您所知，id 在 html 中必须是唯一的。所以我创建了一个“元素”变量并且正在增加它。 我想让我的输入文本成为我模型的 CustomerName。

这是我的代码。

var element = 0;
var HTML = "";
while (element !== 5) {
    HTML += "<input id=senderName" + element + " class=senderNameText type=text>";
    document.getElementById("senderName" + element).value = "@Html.DisplayFor(model => model.CustomerName)";
    element++;
}

            div.innerHTML = HTML;
            document.body.appendChild(div);

当我在 Chrome 控制台中检查它时，它被写为“无法将属性‘值’设置为 null”。

我该怎么办。

谢谢。

Answer 1

您的代码应如下所示(注意创建新输入时需要引号 '):

var element = 0;
var HTML = "";

while (element !== 5) {
    div.innerHTML = "<input id='senderName" + element + "' class='senderNameText' type='text'>";
    document.body.appendChild(div);    

    document.getElementById("senderName" + element).value = "@Html.DisplayFor(model => model.CustomerName)";
    element++;
}

现在，当您尝试从document中选择新元素时，问题就出现了。并且您还没有附加它们，因此您会收到消息错误，这意味着 JS 无法通过 ids 找到任何元素你被给予了。

因此，您应该将新的 HTML 附加到循环内的 DOM。

希望这有帮助。