javascript - 在 JavaScript 中单击按钮时将用户输入添加到列表

Question

我正在尝试创建一个 HTML 表单，该表单从多个文本框(在本例中为 3 个)中获取文本，并将每个文本框的内容添加到单独 div 中的列表中，并创建一个新对象“employee” ，只需点击一个按钮即可。我的目标是模仿将员工添加到数据库中，使用员工 ID、名字和姓氏作为变量。我希望使用纯 JavaScript 来完成此任务。

到目前为止我所拥有的是:

<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" id="firstName">
  <br>Last name:
  <br>
  <input type="text" id="lastName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>

<div id="container">
  <ul id="list"></ul>
</div>

在单独的 JavaScript 文件中:

function myFunction(list){
  var text = document.getElementById("idNumber","fName","lName").value; 
  var li = "<li>" + text + "</li>";
  document.getElementById("list").replaceChild(li);
}

当我调试代码时，它似乎将值设置得很好，但我没有收到列表的实际输出。

Answer 1

您选择的输入元素都没有类名。您还可以使用 document.getElementById 来执行此操作。只需将 id 添加到所有表单元素即可。

您的代码应如下所示。

function myFunction(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text += inputs[i].value;
    }
    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);

}

http://jsfiddle.net/nb5h4o7o/3/

您的列表未被附加，因为您实际上并未创建元素。 replaceChild 应该是 appendChild 并且您应该使用 document.createElement 创建一个列表元素。