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

我正在尝试创建一个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);
}

函数myFunction（列表）{
var text=document.getElementById（“idNumber”、“fName”、“lName”）.value；
var li=“
”+文本+”
”；
文件.getElementById（“列表”）.replaceChild（li）；
}

---

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

您选择的输入元素都没有类名。您也可以使用

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);

函数myFunction（列表）{
var text=“”；
var inputs=document.queryselectoral（“输入[type=text]”）；
对于（变量i=0；i

}

---

您的列表没有被追加，因为您没有实际创建元素

replaceChild

应该是

appendChild

，并且您应该使用

document创建了一个列表元素。createElement

您选择的输入元素都没有类名。您也可以使用

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);

函数myFunction（列表）{
var text=“”；
var inputs=document.queryselectoral（“输入[type=text]”）；
对于（变量i=0；i

}

---

您的列表没有被追加，因为您没有实际创建元素

replaceChild

应该是

appendChild

，并且您应该使用

document创建了一个列表元素。createElement

您选择的输入元素都没有类名。您也可以使用

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);

函数myFunction（列表）{
var text=“”；
var inputs=document.queryselectoral（“输入[type=text]”）；
对于（变量i=0；i

}

---

您的列表没有被追加，因为您没有实际创建元素

replaceChild

应该是

appendChild

，并且您应该使用

document创建了一个列表元素。createElement

您选择的输入元素都没有类名。您也可以使用

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);

函数myFunction（列表）{
var text=“”；
var inputs=document.queryselectoral（“输入[type=text]”）；
对于（变量i=0；i

}

---

您的列表没有被追加，因为您没有实际创建元素

replaceChild

应该是

appendChild

并且您应该使用

document创建了一个列表元素。createElement

您的代码充满了问题，请查看和文档

我已经为您创建了一个版本，我们可以获取表单的所有

输入元素（使用），然后将它们转换为
“
[value]
”
，然后将该数组转换为单个字符串

然后，我们获取该字符串并设置属性。
document.querySelector（'button'）。addEventListener（'click'，函数（e）{
var form=document.querySelector（'form'），
list=document.getElementById（'list'）；
list.innerHTML=[].map.call（form.queryselectoral（'input'），function（el）{
返回“
”+el.value+”
”；
}).加入（“”）；
});

身份证号码：



名字：



姓氏：




提交

您的代码充满了问题，请查看和文档

我已经为您创建了一个版本，我们可以获取表单的所有
输入元素（使用），然后将它们转换为
“
[value]
”
，然后将该数组转换为单个字符串

然后，我们获取该字符串并设置属性。
document.querySelector（'button'）。addEventListener（'click'，函数（e）{
var form=document.querySelector（'form'），
list=document.getElementById（'list'）；
list.innerHTML=[].map.call（form.queryselectoral（'input'），function（el）{
返回“
”+el.value+”
”；
}).加入（“”）；
});

身份证号码：



名字：



姓氏：




提交

您的代码充满了