Listen for Change of Value in Array of Inputs and Update the Array if there is a Change-CodePudding

I'm working on a functionality that requires me to pull the values of several inputs (for product quantities), save them to an array and update that array if any of the input values change. I have some code working that updates the array if there's a change, but doesn't update it if I turn that array into an array of objects with key-value pairs. See my code below:

HTML With Three Inputs

// Get Input Quantities as an HTML Array
const quantities = document.getElementsByName('updates[]');
console.log(quantities);

// Get Input Quantities Values as an Array
let quantitiesValues = [];

// Loop Through Input Quantities Array
for (let i = 0; i < quantities.length; i  ) {
  
  // Push Values to Array
  let values = quantities[i].value;
  quantitiesValues.push(values);
  
  // Change Values in Array
  quantities[i].addEventListener('change', function () {
    quantitiesValues[i] = this.value;
  
  });
}
console.log(quantitiesValues);


// Add Input Value Key
  const productQuanities = quantitiesValues.map(element => {
  return { input_value: element };
});
console.log(productQuanities);

<html>
  <div >
    <input  name="updates[]" value="5" />
  </div>
  <div >
    <input  name="updates[]" value="4" />
  </div>
  <div >
    <input  name="updates[]" value="3" />
  </div>
  <script type="module" src="src/script.js"></script>
</html>

So if I changed the first input value to 10, the output of productQuantities should be:

[{input_value: 10}, {input_value: 5}, {input_value: 3}];

I'm new to JS hence all the comments and console.logs. Any help is appreciated!

Playcode Link: https://playcode.io/934918

CodePudding user response：

you are making a mistake. just put the productQuanities inside the event listener.

just like below

// Get Input Quantities as an HTML Array
const quantities = document.getElementsByName('updates[]');
console.log(quantities);

// Get Input Quantities Values as an Array
let quantitiesValues = [];

// Loop Through Input Quantities Array
for (let i = 0; i < quantities.length; i  ) {
  
  // Push Values to Array
  let values = quantities[i].value;
  quantitiesValues.push(values);
  
  // Change Values in Array
  quantities[i].addEventListener('change', function () {
    quantitiesValues[i] = this.value;
    const productQuanities = quantitiesValues.map(element => {
      return { input_value: element };
    });
      console.log(productQuanities);
  });
}

check this codeplay

CodePudding user response：

Here, I hope that this would help:

const quantities = document.querySelectorAll('[name="updates[]"]');
const button = document.querySelector('#submit');

// Get the values before you do anything
let finalValues = getFinalValues(Array.from(quantities));

quantities.forEach((quantity, i) => {
  quantity.addEventListener('input', function () {
    // Update the values on change of the input values
    finalValues = getFinalValues(Array.from(quantities));
    // Need array.from to convert type NodeList from querySelectorAll to type array
  })
});

button.addEventListener('click', () => {
  console.log(finalValues)                        
});

function getFinalValues(inputs) {
  return inputs.map(element => ({ input_value: element.value }));
}

<html>
  <div >
    <input  name="updates[]" value="5" />
  </div>
  <div >
    <input  name="updates[]" value="4" />
  </div>
  <div >
    <input  name="updates[]" value="3" />
  </div>
  
  <button id="submit">Submit</button>
  <script type="module" src="src/script.js"></script>
</html>