javascript - 入力ボタンを持つ動的フォームを作成する

原文 javascript html forms

私はさまざまな方法を試し、SOでの検索も試しました。答えは私が探していたものではありませんでした。

私が欲しいのは、純粋なJavaScriptでいくつかのことを行う2つの入力ボタンを用意することです。

ボタン1:ページが読み込まれると「追加」と表示されます。クリックすると、値が「キャンセル」に変わります。また、クリックすると、3つのフィールドを持つフォームが表示されます。もう一度クリックすると、フォームが消えます。 1つは「名前」、2番目は「場所」、3番目は「タイプ」です。ユーザーがこれら3つを送信してコードに格納できるようにしたいと考えています。

ボタン2:ユーザー入力をフォームから取得し、ユーザーがクリックするたびに3つの情報値すべてを表示しますが、ボタンはランダムジェネレーターとして機能します。コードに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>





ランダマイザーは機能し、フォームの表示/非表示も機能します。入力を保存し、入力値を切り替えるだけです。
答え
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;
}
関連記事

javascript - JavaScript ifステートメントで部分一致を確認する

javascript - 新しいページを読み込むときに、読み込まれたJavaScriptコンテンツをWebViewに保存する方法は?

javascript - 大きなファイルのブラウザをクラッシュさせるUint8Arrayの変換

javascript - $ .postは、$ J = jQuery.noConflict();と組み合わせて機能していません。

javascript - 選択した要素をAjaxライブ検索からテキストボックスにコピーします

javascript - JavaScriptでのオブジェクトを使用した多次元配列の並べ替え

javascript - ラチェットからスライダーを破壊/無効にする方法は?

javascript - ウェブページに最小高さを置く必要がある

javascript - React-RouterとMixinsを使用したサーバー側認証

javascript - EmberはPOSTリクエストのJSON応答を取得します