使用 json 和 javascript 中的值填充循环生成的表单字段

Question

我有一个使用 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 循环中执行的，所以我不确定为什么会这样。我的方法有什么问题？

Answer 1

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

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

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

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

id=\"forcasteddeplietionsinput\">\n"

...为此：

class=\"forcasteddeplietionsinput\">\n"

...然后使用 getElementsByClassName 到 return 所有文本输入的数组并对其进行索引，如下所示：

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

使用 json 和 javascript 中的值填充循环生成的表单字段

populate loop generated form fields with values from json with javascript

javascript

for-loop

getelementbyid