Question

我有一个模态。根据上下文变量的设置值，模态将显示三个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对象的活动上下文中填充两个按钮和一个表单。表单将使用建议的数字值预先填充。

/* 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;

运行时，出现以下错误：

jQuery.Deferred exception: Cannot set property 'value' of undefined TypeError: Cannot set property 'value' of undefined
    at populate (file:///Users/christopher.jakob/Documents/softwareprojects/slalom/constellationBrands/modalsublime.html:91:60)
    at HTMLDocument.<anonymous> (file:///Users/christopher.jakob/Documents/softwareprojects/slalom/constellationBrands/modalsublime.html:40:9)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29453)
    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot set property 'value' of undefined
    at populate (modalsublime.html:91)
    at HTMLDocument.<anonymous> (modalsublime.html:40)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

document.getElementsByClassName('finput')[i].value = object[i].suggestednumber;

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

任何人都清楚是什么问题吗？

对于傻笑，我将表单值更新放在自己的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;
      }

当我在控制台上登录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

jQuery.Deferred异常：无法设置未定义的类型的属性“值”：无法设置未定义的属性的“值”

0 个答案: