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

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>