JavaScript For loop return not complete data

user_5853287 0
Viewed 58

I have multiple inputs, in this case it's textarea with name attribute and some of fields is required like this:

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

I want to get name value and check is field required so my code looks like:

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);

In result console.log(customizationInputName) I got correct 4 result, but in result of console.log(customizationInputRequired) I got only last required field and last field without required attributes. Could someone point me where is issue in my code?

for-loop javascript
3 Answers

Just push customizationInput[i].value and customizationInput[i].required in the corresponding arrays.

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>

user_144776070

Three things wrong with your code:

  1. Your required attribute is misspelled as reqired thus it's false on all of the elements
  2. You have declared customizationInputName and customizationInputRequired as arrays but you are trying to add items as objects. Both value and required are keys and you are setting values for them
  3. You are setting required value as key in customizationInputRequired in each loop, as you can only have two values true and false, so resulting object will have values from last two elements one having required and other not having required.

With these issues fixed in below code, you should get your desired output in console:

(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>

user_29418990

Why not having a single array of object with what you need like that(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>

user_85573810
Related