将用户输入添加到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创建了一个列表元素。

Answer 2

您的代码充满了问题，请查看document.getElementById和Node.replaceChild文档。

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

然后，我们获取该字符串并设置#list.innerHTML属性。

 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>