Как поместить значения из входных данных HTML в массив объектов javascript

Question

У меня есть три входа, которые будут предоставлены пользователем, и я хочу, чтобы эти 3 входа составляли объекты в массиве в моем файле javascript, т.е. значения для этих 3 входов будут составлять каждый объект в массиве каждый раз, когдапользователь вводит 3 значения и вводит щелчки, в массив должен быть добавлен новый объект с этими 3 значениями в качестве свойств.Как мне добиться этого?

Я пытался получить значения и нажать кнопку, чтобы вставить их в массив, но я продолжаю получать сообщение «Невозможно получить доступ к arr_items» до инициализации в addName »

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");
const arr_items = [];
let i = 0;

function addValues() {
  arr_items[i].name.push(input2.value);
  arr_items[i].weight.push(input3.value);
  arr_items[i].value.push(input4.value);
  i++;
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" placeholder="enter item name">
  <button onclick="addValues()" id="name">Enter</button>
  <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" placeholder="enter item value">
</div>

Я ожидаю, что каждый раз, когда пользователь вводит 3 значения и нажимает ввод, в массив должен быть добавлен новый объект с этими 3 значениями в качестве свойств.

Answer 1

Вы пытаетесь вызвать свойство name, weight и т. Д. Для элемента массива, используя ..Это не верно.Попробуйте сделать:

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");

const arr_items = [];
let i = 0;

function addValues() {
  arr_items[i] = {
    name: input2.value,
    weight: input3.value,
    value: input4.value
  };

  i++;
  console.log(arr_items)
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" placeholder="enter item name">
  <button onclick="addValues()" id="name">Enter</button>
  <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" placeholder="enter item value">
</div>

Answer 2

Вы делали это неправильно, попробуйте это:

      const arrayItems = new Array();

      function addValues(){
        let input2 = document.getElementById("itemName");
        let input3 = document.getElementById("itemWeight");
        let input4 = document.getElementById("itemValue");
        let inputs = {
            input1 : input2.value,
            input3 : input3.value,
            input4 : input4.value
        }
        
        arrayItems.push(inputs);
        console.log(arrayItems);
      }
    

<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addValues()" id="name">Enter</button>
</div>

Answer 3

Вот небольшой фрагмент кода, который я сократил и который берет каждое поле ввода в пределах родительского элемента с атрибутом name и использует эти значения атрибута name в качестве ключей в объекте.

Если в качестве значений объекта используется value полей ввода.

Это позволяет выходному объекту меняться в зависимости от того, какие поля ввода находятся в родительском элементе.Если элемент ввода не имеет name, то он не включается.

Этот код можно использовать повторно, и он всегда возвращает необходимый объект.

const getEls = srcEl => {
  const subs = [...srcEl.querySelectorAll('[name]')];
  return subs.reduce((acc, sub) => {
    acc[sub.getAttribute('name')] = sub.value;
    sub.value = '';
    return acc;
  }, {});
  
  subs[0].focus();
}

let results = [];

function doIt() {
  const srcEl = document.getElementById('container');
  const values = getEls(srcEl);
  results.push(values);
  console.log(JSON.stringify(values,0,20));
}

const btn = document.getElementById('submit');
btn.addEventListener('click', doIt);

const resultsBtn = document.getElementById('show');
resultsBtn.addEventListener('click', () => {
  console.log(JSON.stringify(results,0,2));
});

<div id="container">
  <p>Items Information:</p>
  <input id="itemName" name="name" type="text" placeholder="enter item name"/><br/>
  <input id="itemWeight" name="weight" type="number" placeholder="enter item weight(kg)"/><br/>
  <input id="itemValue" name="value" type="number" placeholder="enter item value"/><br/>
  <button id="submit">Enter</button>
  <hr/>
  <button id="show">Results</button>
</div>

Answer 4

Вы можете просто нажимать на массив снова и снова без счетчика.Вот так:

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");

const arr_items = [];

function addValues() {
  arr_items.push({name: input2.value, weight: input3.value, value: input4.value});
  console.log(arr_items);
}

Answer 5

В ответе есть два основных аспекта. Во-первых, массив должен быть объявлен как переменная (не константа), во-вторых, вы должны переместить входной код var в функцию.

Я добавил предупреждение, чтобы вы могли видеть результат (не был уверен, хотите ли вы добавить их без веса и т. Д.? кнопка)

Надеюсь, это поможет

var arr_items = [];
function addValues() {

  let input2 = document.getElementById("itemName");
  let input3 = document.getElementById("itemWeight");
  let input4 = document.getElementById("itemValue");

  var item2 = input2.value + " " + input3.value + " " + input4.value;
  arr_items.push(item2);
  alert( [arr_items]);
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" name="item" placeholder="enter item name">
  <input id="itemWeight" type="number" name="item" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" name="item" placeholder="enter item value">
  <button id="name" onclick="addValues()">Enter</button>
</div>