Question

我向你们提出一个问题，我希望你们能够对我的情况有所了解。目前，我正在制作一个项目并需要一些帮助。我们没有书可以使用，所以很难到目前为止对此事情一无所知。我已经尝试了几个星期而无法得到我需要的东西所以我最终决定寻求帮助

我目前正在尝试构建一个表单，允许我输入用户，并将信息显示在文本区域中。我可以这样做，但我必须能够存储的不只是一个人的例子低于example。目前我的只能容纳一个用户。我对阵列并不是很好，也不太了解它们。

有人可以帮忙吗？这是我解决问题的唯一选择，因为我不知道该怎么做。

这是我的代码：

<script>
  var memberArray = [name, birthday, gender];

  function myFunction() {
    var name = document.getElementById("myForm").elements[0].value;
    var birthday = document.getElementById("myForm").elements[1].value;
    var gender = document.getElementById("myForm").elements[2].value;
  }

  function displayMembers() {
    var x = document.getElementById("name").value;
    document.getElementById("textArea").innerHTML = x;
    var y = document.getElementById("birthday").value;
    document.getElementById("textArea").innerHTML = y;
    var z = document.getElementById("gender").value;
    document.getElementById("textArea").innerHTML = z;
    var finish = [x, y, z];
    for (i = 0; i < count; i++) {
      finish[i] + ",";
    }
    document.getElementById("textArea").innerHTML = finish;
  }

  function reset() {
    document.getElementById("myForm").reset()
  }
</script>

Answer 1

以下是如何创建所需内容的示例。

最重要的方面是关注点分离，因此您不依赖html来记住您的成员。

//A list of members
var members = [];

//Adding a member. Notice how it doesn't care about the DOM
function addMemberFunction(name, birthday, gender) {
  //Add the new member as an object to the list
  members.push({
    name: name,
    birthday: birthday,
    gender: gender
  })
}

//DOM
function drawMembers() {
    //Get out list
    var list = document.getElementById("members");
    //Empty list
    list.innerHTML = '';
    //For each member
    for (var i = 0; i < members.length; i++) {
      var member = members[i];
      //Add list item
      list.innerHTML += '<li>' +
        //Accessing the current member object
        member.name +
        ' (' +
        member.gender +
        '), ' +
        member.birthday.getFullYear() +
        '</li>';
    }
  }
  //reset dom function

function reset() {
    document.getElementById("name").value = '';
    document.getElementById("day").value = '1';
    document.getElementById("month").value = '1';
    document.getElementById("year").value = '2016';
    document.getElementById("gender").checked = false;
  }
  //Listen for create
document.getElementById("createMember")
  .addEventListener("click", function() {
    //Add member
    var name = document.getElementById("name").value;
    var birthday = new Date(
      document.getElementById("year").value +
      '-' +
      document.getElementById("month").value +
      '-' +
      document.getElementById("day").value
    );
    var gender = document.getElementById("gender").checked ? "male" : "female";
    addMemberFunction(name, birthday, gender);
    //Reset form
    reset();
    //Draw result
    drawMembers();
  }, false)

//Listen for reset
document.getElementById("resetMember")
  .addEventListener("click", reset, false)

//Start
drawMembers();

<div id="addMemberControls">
  <p>Name:
    <input type="text" id="name" placeholder="Name" title="Name" value="" />
  </p>
  <p>Birthday:
    <input type="number" min="1" max="31" id="day" placeholder="Day" title="Day" value="1" />
    <input type="number" min="1" max="12" id="month" placeholder="Month" title="Month" value="1" />
    <input type="number" min="1900" max="2020" id="year" placeholder="Year" title="Year" value="2016" />
  </p>
  <p>Gender:(check for male)
    <input id="gender" type="checkbox" />
  </p>
  <button id="createMember">Create member</button>
  <button id="resetMember">Reset</button>
</div>
<ol id="members">

</ol>

如何输入多个用户

1 个答案: