2

我有多个输入，在这种情况下，它是带有 name 属性的 textarea，并且需要一些字段，如下所示：

<textarea name="filed1" reqired>1</textarea>
<textarea name="filed2">2</textarea>
<textarea name="filed3" reqired>3</textarea>
<textarea name="filed4">4</textarea>

我想获取名称值并检查是否为必填字段，因此我的代码如下所示：

let customizationInputName=[];
let customizationInputRequired=[];
let customizationInput = document.querySelectorAll('textarea');
for (i = 0; i < customizationInput.length; i++) { 
    customizationInputName[customizationInput[i].name] = customizationInput[i].value;
    customizationInputRequired[customizationInput[i].required] = customizationInput[i].value;
}
console.log(customizationInputName);
console.log(customizationInputRequired);

结果console.log(customizationInputName)我得到了正确的 4 结果，但结果console.log(customizationInputRequired)我只得到了最后一个必填字段和最后一个没有必填属性的字段。有人可以指出我的代码中的问题吗？

4

3 回答 3

1

只需将customizationInput[i].value和推入customizationInput[i].required相应的数组中。

let customizationInputName=[];
let customizationInputRequired=[];
let customizationInput = document.querySelectorAll('textarea');
for (i = 0; i < customizationInput.length; i++) { 
  customizationInputName.push(customizationInput[i].value);
  customizationInputRequired.push(customizationInput[i].required);
}
console.log(customizationInputName);
console.log(customizationInputRequired);
<textarea name="filed1" required>1</textarea>
<textarea name="filed2">2</textarea>
<textarea name="filed3" required>3</textarea>
<textarea name="filed4">4</textarea>

于 2020-11-08T14:15:13.407 回答
0

您的代码存在三处错误：

  1. 您的required属性拼写错误，reqired因此它在所有元素上都是错误的
  2. 您已将customizationInputNameand声明customizationInputRequired为数组，但您正在尝试将项目添加为对象。value 和 required 都是键，您正在为它们设置值
  3. 您将requiredvalue 设置为customizationInputRequired每个循环中的键，因为您只能有两个值 true 和 false，因此生成的对象将具有来自最后两个元素的值，一个需要，另一个不需要。

在以下代码中修复了这些问题后，您应该在控制台中获得所需的输出：

(function() {
  let customizationInputName = {};
  let customizationInputRequired = {};
  let customizationInputRequiredUnique = {}; //for testing purpose
  let customizationInput = document.querySelectorAll('textarea');



  for (i = 0; i < customizationInput.length; i++) {

    customizationInputName[customizationInput[i].name] = customizationInput[i].value;
    //check if attribute is true then only add to the object
    if (customizationInput[i].required) {
      customizationInputRequired[customizationInput[i].required] = customizationInput[i].value;
    }
    //make unique keys and you can have all items for testing
    customizationInputRequiredUnique[customizationInput[i].name + customizationInput[i].required] = customizationInput[i].value;


  }
  console.log('customizationInputName:', customizationInputName);
  console.log('customizationInputRequired:', customizationInputRequired);
  console.log('customizationInputRequiredUnique:', customizationInputRequiredUnique);
})();
<textarea name="filed1" required>1</textarea>
<textarea name="filed2">2</textarea>
<textarea name="filed3" required="true">3</textarea>
<textarea name="filed4">4</textarea>

于 2020-11-08T14:28:48.447 回答
0

为什么不使用你需要的单个对象数组（ES6）：

let customizationInput = [...document.querySelectorAll('textarea')];
   
let customizationInputArr =customizationInput.map(textarea =>({name: textarea.name,required : textarea.required,value : textarea.value}))
console.log(customizationInputArr);
<textarea name="filed1" required>1</textarea>
<textarea name="filed2">2</textarea>
<textarea name="filed3" required>3</textarea>
<textarea name="filed4">4</textarea>

于 2020-11-08T15:10:02.480 回答