使用输入按钮创建动态表单

Question

我尝试了许多不同的方法，甚至尝试在 SO 上进行搜索。没有答案是我想要的。

我想要的是有两个输入按钮，可以在纯 javascript 中做一些事情。

按钮一：页面加载时显示“添加”。单击时，该值变为“取消”。此外，当它被点击时，让它显示一个包含三个字段的表单。再次单击时，表单消失。一个命名为“名称”，第二个命名为“位置”，第三个命名为“类型”。我希望用户能够提交这三件事并将它们存储在代码中。

按钮二：从表单中获取用户输入，每次用户单击时，它都会显示所有三个信息值，但让按钮充当随机生成器。假设代码有 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>

随机发生器有效，显示/隐藏表单也有效。唯一的事情就是存储输入并切换输入值。

Answer 1

Here's one way to do this。每个表单提交都存储为数组中的一个对象。随机按钮从数组中随机选择一项并显示在下方。

HTML：

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

<div id="randomName"></div>
<div id="randomLocation"></div>
<div id="randomType"></div>

JS：

var formData = [];
var formSubmission = function(name, location, type) {
    this.name = name;
    this.location = location;
    this.type = type;
}
var spotName = document.getElementById("orderName"),
    spotLocation = document.getElementById("orderLocation"),
    spotType = document.getElementById("orderType");

var addClick = function() {
    if (this.value === 'Add Spot') {
        this.value = "Cancel";
        document.getElementById('order').style.display = 'block';
    }
    else {
        this.value = 'Add Spot';
        document.getElementById('order').style.display = 'none';
    }
}

document.getElementById("btnAdd1").onclick = addClick;

document.getElementById('order').onsubmit = function(e) {
    e.preventDefault();
   var submission = new formSubmission(spotName.value, spotLocation.value, spotType.value);
   formData.push(submission);
   submission = '';
    document.getElementById('btnAdd1').value = 'Add Spot';
    document.getElementById('order').style.display = 'none';
    this.reset();
}

var randomValue;
document.getElementById('btnChoose').onclick = function() {
    randomValue = formData[Math.floor(Math.random()*formData.length)];
    document.getElementById('randomName').innerHTML = randomValue.name;
    document.getElementById('randomLocation').innerHTML = randomValue.location;
    document.getElementById('randomType').innerHTML = randomValue.type;
}

Answer 2

自从你第一次发帖以来，我一直在做一些事情，这是我的看法：

HTML：

<section>
    <p id="message">
        <div id="name"></div>
        <div id="location"></div>
        <div id="type"></div>
    </p>
    <input type="button" id="btnAdd" value="Add" onclick="doAdd(this);" />
    <input type="button" id="btnShow" value="Show" onclick="doShow(this);" />
    <div class="form">
        <script id="myRowTemplate" type="text/template">
            <input type="text" name="name" placeholder="Name of Resturant" required="required" autocomplete="on" onchange="onChanged(this, {{i}})" />
            <input type="text" name="type" placeholder="Type of Food" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
            <input type="text" name="location" placeholder="Location" required="required" autocomplete="off" onchange="onChanged(this, {{i}})" />
        </script>
        <form id="order" style="display:none;">
            <div id="formItems">
            </div>
            <input type="button" value="Add Spot" onclick="addSpot()" />
        </form>
    </div>
</section>

JS：

function GetValue() {
    if (enteredItems.length) {
        var entry = enteredItems[Math.floor(Math.random() * enteredItems.length)];
        document.getElementById("name").innerHTML = entry.name;
        document.getElementById("location").innerHTML = entry.location;
        document.getElementById("type").innerHTML = entry.type;
    }
}

function doAdd(elem) {
    switch (elem.value) {
        case "Add":
            document.getElementById('order').style.display = "";
            elem.value = "Cancel";
            break;
        case "Cancel":
            document.getElementById('order').style.display = "none";
            elem.value = "Add";
            break;
    }
}

function doShow(elem) {
    GetValue();
}

function addSpot(index) { // (note: here, index is only for loading for the first time)
    if (index == undefined) index = enteredItems.length;
    var newRowDiv = document.createElement("div");
    newRowDiv.innerHTML = document.getElementById("myRowTemplate").innerHTML.replace(/{{i}}/g, index); // (this updates the template with the entry in the array it belongs)
    if (enteredItems[index] == undefined)
        enteredItems[index] = { name: "", location: "", type: "" }; // (create new entry)
    else {debugger;
        newRowDiv.children[0].value = enteredItems[index].name;
        newRowDiv.children[1].value = enteredItems[index].location;
        newRowDiv.children[2].value = enteredItems[index].type;
    }
    document.getElementById("formItems").appendChild(newRowDiv);
}

function onChanged(elem, index) {
    enteredItems[index][elem.name] = elem.value;
    localStorage.setItem('enteredItems', JSON.stringify(enteredItems)); // (save each time
}

// update the UI with any saved items 

var enteredItems = [];

window.addEventListener("load", function() {
    var retrievedObject = localStorage.getItem('enteredItems');

    if (retrievedObject)
        enteredItems =  retrievedObject = JSON.parse(retrievedObject);

    for (var i = 0; i < enteredItems.length; ++i)
        addSpot(i);
});

https://jsfiddle.net/k1vp8dqn/

我花了一点时间，因为我注意到你正在尝试保存这些物品，所以我准备了一些你可以玩的东西来满足你的需要。