Question

我有3个输入，这些输入将由用户提供，我希望这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

答案中有两个主要方面需要注意。一种是应将数组声明为变量（而不是常量），另一种是应将输入的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>

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

您做错了这个尝试：

      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>

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

5 个答案: