使用输入按钮

Question

我尝试了很多不同的方法，甚至尝试过搜索SO。没有回答是我正在寻找的。

我想要的是有两个输入按钮，可以在纯JavaScript中执行某些操作。

按钮一：在页面加载时让它说“添加”。单击时，该值将更改为“取消”。此外，单击它时，让它显示一个包含三个字段的表单。再次单击时，表单将消失。一个名为'name'，第二个名为'location'，第三个名为'type'。我希望用户能够提交这三件事并将它们存储在代码中。

按钮二：从表单中获取用户输入，每次用户单击时，它都会显示所有三个信息值，但按钮会充当随机生成器。假设代码有5个单独的条目，我希望它们随机选择并在单击按钮时显示。

就像我说的那样，我试图让这项工作成功，但无法完全超越我想去的地方。如果你想查看我的原始代码，请问，但我怀疑它会有任何帮助。

提前致谢。

编辑：添加了代码。

function GetValue() {
  var myarray = [];
  var random = myarray[Math.floor(Math.random() * myarray.length)];
  document.getElementById("message").innerHTML = random;
}
var testObject = {
  'name': BWW,
  'location': "Sesame Street",
  'type': Bar
};

localStorage.setItem('testObject', JSON.stringify(testObject));

var retrievedObject = localStorage.getItem('testObject');

function change() {
  var elem = document.getElementById("btnAdd1");
  if (elem.value == "Add Spot") {
    elem.value = "Cancel";
  } else elem.value = "Add Spot";

}

window.onload = function() {

  var button = document.getElementById('btnAdd1');

  button.onclick = function show() {
    var div = document.getElementById('order');
    if (div.style.display !== 'none') {
      div.style.display = 'none';
    } else {
      div.style.display = 'block';

    }
  };
};

<section>
  <input type="button" id="btnChoose" value="Random Spot" onclick="GetValue();" />
  <p id="message"></p>
  <input type="button" id="btnAdd1" value="Add Spot" onclick="change();" />
  <div class="form"></div>
  <form id="order" style="display:none;">
    <input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" />
    <input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" />
    <input type="text" name="location" placeholder="Location" required="required" autocomplete="off" />
    <input type="submit" value="Add Spot" />
  </form>
  </div>
</section>

随机数发生器有效，出现/隐藏表单也是如此。只有存储输入和切换输入值。