Создание динамической формы с кнопками ввода

Question

Я пробовал много разных методов и даже пытался искать на SO. Никакой ответ не был тем, что я искал.

Я хочу иметь две кнопки ввода, которые делают некоторые вещи в чистом javascript.

Кнопка 1: Скажите «Добавить», когда страница загружается. При щелчке значение изменяется на «Отмена». Кроме того, когда он щелкнут, отобразите форму с тремя полями. Когда он снова нажат, форма исчезнет. Один из них называется «имя», второй - «местоположение», третий - «тип». Я хочу, чтобы пользователь мог представить эти три вещи и сохранить их в коде.

Путь два: возьмите пользовательский ввод из формы и каждый раз, когда пользователь нажимает, он отображает все три информационных значения, но кнопка действует как случайный генератор. Скажем, у кода есть 5 отдельных записей, я хочу, чтобы они были случайно выбраны и отображены при нажатии кнопки.

Как я уже сказал, я попытался выполнить эту работу, но не мог полностью преодолеть то место, где я хотел пойти с ним. Если вы хотите увидеть мой исходный код, просто спросите, но я сомневаюсь, что это поможет.

Заранее спасибо.

EDIT: Добавлен код.

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/

меня ушло немного больше, потому что я заметил, что вы пытаетесь сохранить детали, поэтому я взбитыми то, что вы можете играть с, чтобы удовлетворить ваши потребности.