开发者问题收集

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

2015-10-07
11175
javascript html

我试图创建一个 HTML 表单，该表单从多个文本框（在本例中为 3 个）获取文本，并将每个文本框的内容添加到单独的 div 中的列表中，以及创建一个新的对象“员工”，所有操作只需单击一个按钮即可完成。我的目标是模拟将员工添加到数据库，使用员工 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);
}

当我调试代码时，它似乎可以正确设置值，但我没有收到列表的实际输出。

2个回答

您选择的输入元素均没有类名。您也可以使用 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 创建列表元素。

Richard Hamilton
2015-10-07

您的代码有很多问题，请查看 document.getElementById 和 Node.replaceChild 文档。

我为您创建了一个版本，我们获取表单的所有 input 元素（使用 querySelectorAll ），然后我们使用 Array.prototype.map 将它们转换为 "<li>[value]</li>" ，然后 Array.prototype.join 将该数组转换为单个字符串。 

document.querySelector('button').addEventListener('click', function(e) {
  var form = document.querySelector('form'),
      list = document.getElementById('list');
  
  list.innerHTML = [].map.call(form.querySelectorAll('input'), function(el) {
    return '<li>' + el.value + '</li>';
  }).join('');
});
<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">Submit</button>

<div id="container">
  <ul id="list"></ul>
</div>
Buzinas
2015-10-07