循环遍历输入数组以设置值，“无法设置未定义的属性值”

looping through array of inputs to set value, "cannot set property value of undefined"?

本文关键字：设置 未定义 属性 输入 遍历 数组 循环      更新时间：2023-09-26

我正在寻找一种简单的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;
    }
}

您需要使用对象而不是数组，并且应该使用"点表示法"以获得更好的清晰度。

编辑

我更改了代码，因为我不喜欢说"不，你不能"，所以这是带有循环的新函数。

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.

还有小提琴。

要重用函数每个区域中的名称，请将它们添加到数组中并迭代它们，但您需要确保 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];
    });
  }
}

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

你已经声明了：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= {}。

相关文章：