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

Question

我有三个输入将由用户提供，我希望这 3 个输入构成我的 javascript 文件中数组中的对象，即，这 3 个输入的值将构成数组中的每个对象，每次用户输入 3 个值并单击回车，应将以这 3 个值作为属性的新对象添加到数组中。我如何实现这一目标？

我试图获取值，然后单击以将它们插入数组，但我一直收到“初始化前无法访问‘arr_items’” 在添加名称”

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>