0

我正在寻找一种纯 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;
    }
}
4

4 回答 4

1

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

编辑

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

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。

于 2013-11-08T20:58:41.593 回答
1

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

}
于 2013-11-08T21:18:37.690 回答
0

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

于 2013-11-08T20:48:58.747 回答
0

您已声明： var arr = []; 然后分配 arr.fn, arr.ln n 所以..

要么声明 var arr = {}; 或将 arr.fn、arr.ln 分配为 arr[0]、arr[1]。

分配时，

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

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

于 2013-11-08T20:55:34.280 回答