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

Question

I'm trying to create an HTML form which takes the text from multiple textboxes (in this case, 3) and adds the content of each to a list in a separate div, as well as create a new object "employee", all via the click of a button. My goal is to imitate adding employees to a database, using an employee id, first name, and last name as variables. I am looking to accomplish this using pure javascript.

What I have so far is:

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

In a separate JavaScript file:

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

When I debug my code it seems to be setting the values fine, but I receive no actual output of my list.

Answer 1

None of the input elements you selected had a class name. You can also do this with document.getElementById . Just add ids to all your form elements.

Your code should look something like this.

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/

Your list wasn't being appended to because you weren't actually creating the elements. replaceChild should have been appendChild and you should have created a list element with document.createElement .

Answer 2

Your code is full of problems, look at the document.getElementById and Node.replaceChild docs.

I've created a version for you that we get all the input elements of your form (using querySelectorAll ), and then we use Array.prototype.map to turn them into "<li>[value]</li>" , and then Array.prototype.join to turn that array into a single string.

Then, we get that string and set the #list.innerHTML property.

 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>