javascript - 通过用户输入将对象添加到数组

Question

我要制作一个表单，用户有两个“事件”可供选择。然后，该信息将与一些个人信息一起保存，以便稍后在每个相应事件下方列出注册的不同个人。虽然我还想制作一个表单，可以在其中向用户可见的选项列表中添加更多事件。我只是不知道该怎么做。我创建了一个包含不同事件的数组，但由于我无法对其进行硬编码，而是需要使用给定的“管理表单”生成新对象，所以我陷入了困境。我该去哪里？

这是我到目前为止的数组:

var sport = [
  {
     id:1,
     Name:"Fotboll",
     Place:{lat:59.999999, long: 17.99999},
     Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}]
  },
  {
     id:2,
     Name:"Tennis",
     Place:{lat:59.88888, long: 17.88888},
     Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}]
   }
];

Answer 1

下面是实现所请求逻辑的基本表单的示例。请注意，您可能需要更改一些表单元素才能使其正常工作，但这应该可以满足您的需求。

var myActivities = [];

document.querySelector('form button').addEventListener('click', function(event) {

  var inputs = document.querySelectorAll('form input');
  var newActivity = {};
  for (var i = 0; i < inputs.length; i++) {
    newActivity[inputs[i].name] = inputs[i].value;
    inputs[i].value = '';
  }
  myActivities.push(newActivity);
  console.log(myActivities);
  event.preventDefault();

}, false);

<form>
  <input type="text" name="name" value="" placeholder="Name" /><br />
  <input type="text" name="input2" value="" placeholder="Input 2" /><br />
  <input type="text" name="input3" value="" placeholder="Input 3" /><br />
  <input type="text" name="input4" value="" placeholder="Input 4" /><br />
  <button>Add</button>
</form>