Question

我正在寻找一种简单的Javascript方法来修复我的以下代码：

function autoFill(response) {
    var arr = [];
    arr.fn = document.getElementsByName("firstName")[1];
    arr.ln = document.getElementsByName("lastName")[1];
    arr.em = document.getElementsByName("Email")[1];
    arr.pn = document.getElementsByName("phoneNumber")[1];

    if(response === false) {
        alert('false');
        arr.forEach(function(entry){
            entry.value = "";
        });
    }else{
        alert('true');
        arr.fn.value = response.firstName;
        arr.ln.value = response.lastName;
        arr.en.value = response.email;
        arr.pn.value = response.phone;
    }
}

我正在尝试做什么：

如果response data === false，请遍历arr[]中的每个元素，并将其文本值设置为空""。

发生了什么：

直接设置值工作（如else{}块中所示），但循环或迭代数组会引发错误：Uncaught TypeError: Cannot set property 'value' of undefined

问题：

如何循环存储在数组中的输入集合并设置其值？为什么抛出undefined错误？

谢谢！

编辑：更改为以下内容无效; else{]块仍然正常，循环是我认为的问题。

    function autoFill(response) {
    var arr = [];
    arr["fn"] = document.getElementsByName("firstName")[1];
    arr["ln"] = document.getElementsByName("lastName")[1];
    arr["em"] = document.getElementsByName("Email")[1];
    arr["pn"] = document.getElementsByName("phoneNumber")[1];

    if(response === false) {
        alert('false');
        arr.forEach(function(entry){
            entry.value = "";
        });

    }else{
        alert('true');
        arr["fn"].value = response.firstName;
        arr["ln"].value = response.lastName;
        arr["en"].value = response.email;
        arr["pn"].value = response.phone;
    }
}

Answer 1

~~你需要使用一个对象而不是一个数组，为了更清晰，你应该使用“dot notation”。~~

修改

我改变了代码，因为我不想说“不，你不能”，所以这里是循环的新功能。

function autoFill(response) { var fill = {}; for (var i=0; i < document.myForm.elements.length; i++) { var elm = document.myForm.elements[i]; // Get current element. fill[elm.name] = elm; // Associate fill[input name] with current input. if (elm.getAttribute("data-autofill") === "undefined" || elm.getAttribute("data-autofill") === null) continue; // Continue if property data-autofill is not set. // If response have the input name as key, we set the value otherwise, it would be an empty string or unchecked. switch(elm.type) { case 'checkbox': case 'radio': response.hasOwnProperty(elm.name) ? fill[elm.name].checked = response[elm.name] : fill[elm.name].checked = false; // Checked if response if true. break; default: response.hasOwnProperty(elm.name) ? fill[elm.name].value = response[elm.name] : fill[elm.name].value = ""; // Set response text or a empty string. } } return fill; // Return object for later uses. } var myForm = autoFill({ firstName: "John", check: true, ni: "Not supposed to be set" // Won't set because he doesn't have the property data-autofill. }); myForm.lastName.value = "Awesome"; // Now we can set values like this because we returned all form elements.

jsFiddle。

Answer 2

要重用函数的每个区域中的名称，将它们添加到数组并迭代它们但您需要确保response中的属性和DOM元素名称匹配

function autoFill(response) {

  var arr = ['firstName', 'lastName', 'Email', 'phoneNumber'];

  var obj = {};

  arr.forEach(function (el) {
    obj[el] = document.getElementsByName(el)[1];
  });

  if (response === false) {
    alert('false');
    for (var k in obj) {
      obj[k]['value'] = "";
    }
  } else {
    alert('true');
    arr.forEach(function (el) {
      obj[el]['value'] = response[el];
    });
  }

}

Answer 3

您应该将输入字段存储到数组中 arr [0]，arr [1]并使用索引访问它们。

Answer 4

你已声明：var arr = [];然后分配arr.fn，arr.ln n so ..

声明var arr = {};或者将arr.fn，arr.ln指定为arr [0]，arr [1]。

分配时，

     var arr = [];  
     arr["fn"] = document.getElementsByName("firstName")[1];

并观察arr的值，它将为空。所以将其声明为var arr = {}。

循环输入数组来设置值，“不能设置undefined的属性值”？

4 个答案: