Javascript 延迟异常：无法设置属性'；价值'；未定义类型的错误：无法设置属性'；价值'；未定义的

我有一个情态动词。根据上下文变量的设置值，模态将显示三个html组中的一个。它是三个情态动词合一的

模式通过json对象填充各种html值：

var object = [
      {
        id: 34,
        week: '9/15/20',
        suggestednumber: 6,
        number: null
      },
      {
        id: 674,
        week: '10/13/20',
        suggestednumber: 70,
        number: null
      },
      {
        id: 54,
        week: '11/17/20',
        suggestednumber: 34,
        number: null
      }
    ];

两个按钮和一个表单将在数组中每个json对象的活动上下文中填充。表单将预先填充suggestednumber值

/* function that populates the buttons and form fields of the selected modal
    takes the css id of the row its populating.
    */

    function populate(cssid){

      /* script for forcasted deplitions tested for loop */
      for( i  = 0; i < object.length; i++){
        $(cssid).append("<div  class=\"col-xs-12\">\n" +
          `      <p class=\"text-left text-uppercase text-muted\">wk of ${object[i].week}</p>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          `      <button onclick=\"cbibuttonclick(${object[i].id})\" class=\"btn btn-default btn-block m-0 p-0\">` +
          `<span id=\"${object[i].id}\" class=\"text-uppercase text-primary cbi\">cbi</span></button>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          `      <button onclick=\"custombuttonclick(${object[i].id})\" class=\"btn btn-default btn-block m-0 p-0\"><span id=\"${object[i].id}\" class=\"text-uppercase text-muted custom\">custom</span></button>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4\">\n" +
          "      <form class=\"form-inline\">\n" +
          "        <input type=\"number\"\n" +
          `               onclick=\"formclick(${object[i].id})\"\n` +
          `               onchange=\"update(${object[i].id})\"\n` +               
          "               class=\"form-control finput\"\n" +
          `               id=\"${object[i].id}\">\n` +
          "      </form>\n" +
          "    </div>");
        console.log('this is the iterator for the form creation');
        console.log(i);
        document.getElementsByClassName('finput')[i].value = object[i].suggestednumber;

      }

document.getElementsByClassName（'finput'）[i]。value=object[i]。suggestednumber

现在有趣的是，当我从上述代码中删除
（'finput
）旁边的
[I]
时：
我的代码没有中断，但是屏幕上没有显示任何按钮

有人清楚问题是什么吗

对于giggles，我将表单值更新放在它自己的for循环中，以便在jquery添加所有html代码之后执行。但错误依然存在

// for loop to populate form inputs as it seems trying to do so in one for loop make the thing unhappy 

      for(i =0; i< object.length; i++){
        x = document.getElementsByClassName('finput')[i].value = object[i].suggestednumber;
      }

//for循环填充表单输入，因为它似乎试图在一个for循环中填充表单输入，这会使事情变得不愉快
对于（i=0；i

当我控制台记录find元素类jquery调用时，我得到

here is the result of attempting to find the form class
modalsublime.html:92 
HTMLCollection []
length: 0
__proto__: HTMLCollection
item: ƒ item()
arguments: (...)
caller: (...)
length: 1
name: "item"
__proto__: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ toString()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
__proto__: Object
[[FunctionLocation]]: <unknown>
[[Scopes]]: Scopes[0]
[[Scopes]]: Scopes[0]
No properties
length: (...)
namedItem: ƒ namedItem()
arguments: (...)
caller: (...)
length: 1
name: "namedItem"
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
No properties
constructor: ƒ HTMLCollection()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "HTMLCollection"
get length: ƒ length()
__proto__: Object

这是尝试查找表单类的结果
modalsublime.html:92
HTMLCollection[]
长度：0
__原型：HTMLCollection
项目：ƒ项目（）
参数：（…）
呼叫者：（…）
长度：1
名称：“项目”
__原形：原形（）
应用：ƒapply（）
参数：（…）
绑定：ƒbind（）
通话：ƒcall（）
呼叫者：（…）
构造函数：函数（）
长度：0
姓名：“
toString:ƒtoString（）
Symbol（Symbol.hasInstance）：ƒ[Symbol.hasInstance]（）
获取参数：ƒ（）
设置参数：ƒ（）
获取调用方：ƒ（）
设置调用方：ƒ（）
__原型：对象
[[FunctionLocation]]：
[[Scopes]]：作用域[0]
[[Scopes]]：作用域[0]
无属性
长度：（…）
namedItem:ƒnamedItem（）
参数：（…）
呼叫者：（…）
长度：1
名称：“namedItem”
__原形：原形（）
[[Scopes]]：作用域[0]
无属性
构造函数：ƒHTMLCollection（）
Symbol（Symbol.iterator）：ƒvalues（）
Symbol（Symbol.toStringTag）：“HTMLCollection”
获取长度：ƒlength（）
__原型：对象
你能发布你的HTML吗？听起来像是
文档。GetElementsByCassName
没有返回任何内容，因为它找不到与您的类匹配的内容。@MattiPrice jQuery代码应该添加一个类为“finput”的元素……您试图访问一个不存在的数组索引
i
，这意味着数组中至少没有
i
元素。@MattiPrice是正确的。带有类的表单首先由jquery添加，然后执行find类代码。这是针对每个循环的。@YourRacIstGrand您可能需要对这个问题进行简化，因为我只是尝试对它进行模拟，结果成功了。我似乎无法让那个错误显现出来。这些按钮真的出现在你的页面上吗？你能发布你的HTML吗？听起来像是
文档。GetElementsByCassName
没有返回任何内容，因为它找不到与您的类匹配的内容。@MattiPrice jQuery代码应该添加一个类为“finput”的元素……您试图访问一个不存在的数组索引
i
，这意味着数组中至少没有
i
元素。@MattiPrice是正确的。带有类的表单首先由jquery添加，然后执行find类代码。这是针对每个循环的。@YourRacIstGrand您可能需要对这个问题进行简化，因为我只是尝试对它进行模拟，结果成功了。我似乎无法让那个错误显现出来。这些按钮真的出现在你的页面上了吗？
here is the result of attempting to find the form class
modalsublime.html:92 
HTMLCollection []
length: 0
__proto__: HTMLCollection
item: ƒ item()
arguments: (...)
caller: (...)
length: 1
name: "item"
__proto__: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ toString()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
__proto__: Object
[[FunctionLocation]]: <unknown>
[[Scopes]]: Scopes[0]
[[Scopes]]: Scopes[0]
No properties
length: (...)
namedItem: ƒ namedItem()
arguments: (...)
caller: (...)
length: 1
name: "namedItem"
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
No properties
constructor: ƒ HTMLCollection()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "HTMLCollection"
get length: ƒ length()
__proto__: Object