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

Add user input to list on button click in JavaScript

本文关键字：输入 用户 添加 列表 JavaScript 单击 按钮      更新时间：2023-09-26

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

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

您选择的所有输入元素都没有类名。你也可以这样处理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创建一个列表元素

你的代码充满了问题，看看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>

相关文章：