使用 javascript 使用来自 json 的值填充循环生成的表单字段答案

【问题标题】：populate loop generated form fields with values from json with javascript使用 javascript 使用来自 json 的值填充循环生成的表单字段
【发布时间】：2019-10-29 21:28:11
【问题描述】：

我有一个使用 javascript 和 jquery 的网页。

我正在尝试通过 for 循环动态创建内容。

循环在一个 json 对象数组上。每个对象都有一个星期字符串和一个数字整数。

每个循环创建两个按钮和一个表单域。该数字需要填充表单字段。

当循环执行按钮并创建表单域时，数字只会填充第一个表单域。

它用每个数字填充它。

所以给定数组

var testobject = [
      {
        week: '9/15/20',
        number: 6
      },
      {
        week: '10/13/20',
        number: 70
      },
      {
        week: '11/17,20',
        number: 34
      }
    ];

第一个表单域将填充数字 6，然后替换为 70，然后替换为 34。

相反，每个表单字段都应具有与其在 for 循环中的迭代相对应的数字。

第一个表单域应该有 6 第二个表单字段应该有 70 第三个表单字段应该有 34

这是我循环中的代码：

for( i  = 0; i < testobject.length; i++){
        console.log(testobject);
        $("#forcastcontentrow").append("<div  class=\"col-xs-12\">\n" +
          `      <p class=\"text-left text-uppercase text-muted\">wk of ${testobject[i].week}</p>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-primary\">cbi</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-muted\">custom</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4\">\n" +
          "      <form class=\"form-inline\">\n" +
          "        <input type=\"number\"\n" +
          "               class=\"form-control\"\n" +
          "               id=\"forcasteddeplietionsinput\">\n" +
          "      </form>\n" +
          "    </div>");
        document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

      }

document.getElementById('forcasteddeplietionsinput').value = testobject[i].number; 在 for 循环中执行，所以我不确定为什么会这样。我的方法有什么问题？

【问题讨论】：

标签： javascript for-loop getelementbyid

【解决方案1】：

您需要更改文本输入元素的选择器。

document.getElementById 只返回它在 DOM 中找到的具有给定 id 的第一个元素。由于您的 for 循环复制了该 ID，因此该行只会更改第一个文本输入元素：

document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

你可以做的是改变这一行：

id=\"forcasteddeplietionsinput\">\n"

...到这个：

class=\"forcasteddeplietionsinput\">\n"

...然后使用getElementsByClassName 返回一个包含所有文本输入的数组并对其进行索引，如下所示：

document.getElementsByClassName('forcasteddeplietionsinput')[i].value = testobject[i].number;

【讨论】：