如何将来自 html 输入的值放入 javascript 对象数组中

Question

我有三个输入，它们将由用户给出，我希望这 3 个输入组成我的 javascript 文件中的数组中的对象，即这 3 个输入的值将组成数组中的每个对象，每次用户输入 3 个值并单击 Enter，应将具有这 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 个值并单击 Enter 时，都应该将具有这 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

您可以一次又一次地推送到数组而无需计数器。像这样：

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 4

这是我精简的一小段代码，它获取父级中具有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 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>