Question

好吧，所以我之前没有使用过JSON。到目前为止，我能够显示输入的最后信息，但我需要显示输入的每个输入。如何循环我当前的功能来执行此操作？我需要做一个for循环吗？如果是这样，我可以获得一些关于它看起来如何的提示吗？任何帮助都会很棒！

编辑：代码很长，所以我插入了我的codepen链接here

＆＃13;

  

  var form = document.getElementsByTagName("form")[0];
    form.method = "POST";
    form.action = "form-handler";
    form.onsubmit = submitForm;

    var add = document.getElementsByClassName("add");
    add[0].onclick = houseList;
    var lastId = 0;

    var age = document.getElementsByName("age")[0];
    age.type = "number";
    age.required = true;
    age.min = "0";
    age.max = "120";

    var dropDown = document.getElementsByName("rel")[0];
    dropDown.type = "option";
    dropDown.required = true;

    var smoker = document.getElementsByName("smoker")[0];

    var newDiv = document.createElement("div");
    newDiv.setAttribute("id", "houseMem");
    document.body.appendChild(newDiv);

    var ul = document.createElement("ul");
    ul.setAttribute("id", "memList");
    newDiv.appendChild(ul);
    var h2 = document.createElement("h2");
    h2.appendChild(document.createTextNode("House Member List"));
    ul.appendChild(h2);

    function houseList() {
      if (age == null || age.value === "") {
        alert("Age must be filled out");
        return false;
      } else if (age.value == age.max) {
        alert("Age must be 120 years old or less!");
        return false;
      } else if (dropDown.value == "") {
        alert("Please choose a relationship");
        return false;
      } else {
        var li = document.createElement("li");

        if (smoker.checked) {
          li.appendChild(
            document.createTextNode(
              dropDown.value + " " + age.value + ", Smoker " + " "
            )
          );
        } else {
          li.appendChild(
            document.createTextNode(
              dropDown.value + " " + age.value + ", Non-Smoker " + " "
            )
          );
        }

        li.setAttribute("id", "item" + lastId);
        ul.appendChild(li);

        var remove = document.createElement("button");
        remove.appendChild(document.createTextNode("delete"));
        remove.onclick = removeItem;
        remove.setAttribute("onclick", 'removeItem("' + "item" + lastId + '")');

        li.appendChild(remove);
        lastId += 1;
        ul.appendChild(li);

        return false;
      }
    }

    function removeItem(itemid) {
      var item = document.getElementById(itemid);
      item.parentNode.removeChild(item);
    }

// THE CODE IN QUESTION
      function submitForm() {
      var display = document.getElementsByClassName("debug")[0];
      var members = new Object();
      members.Member = dropDown.value;
      members.Age = age.value;
      members.Smoker = smoker.checked;
      var jsonText = JSON.stringify(members);
      display.textContent = jsonText;
      console.log(jsonText);
      alert("Form has been submitted!");
      return false;
    }

＆＃13;

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <title>Household builder</title>
      <style>
        .debug {
          font-family: monospace;
          border: 1px solid black;
          padding: 10px;
          display: none;
        }
      </style>
    </head>

    <body>
      <h1>Household builder</h1>
      <div class="builder">
        <ol class="household"></ol>
        <form>
          <div>
            <label>Age
                            <input type="text" name="age">
                        </label>
          </div>
          <div>
            <label>Relationship
                            <select name="rel">
                                <option value="">---</option>
                                <option value="self">Self</option>
                                <option value="spouse">Spouse</option>
                                <option value="child">Child</option>
                                <option value="parent">Parent</option>
                                <option value="grandparent">Grandparent</option>
                                <option value="other">Other</option>
                            </select>
                        </label>
          </div>
          <div>
            <label>Smoker?
                            <input type="checkbox" name="smoker">
                        </label>
          </div>
          <div>
            <button class="add">add</button>
          </div>
          <div>
            <button type="submit">submit</button>
          </div>
        </form>
      </div>
      <pre class="debug"></pre>
      <script type="text/javascript" src="./index.js"></script>
    </body>

    </html>

＆＃13;

从动态创建的列表中显示JSON列表

0 个答案: