html - Add user input to list on button click in JavaScript - Stack Overflow

admin管理员组

文章数量:1392007

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

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

• javascript
• html

Share Improve this question Follow edited Oct 7, 2015 at 23:48 Jeremy Stone asked Oct 7, 2015 at 23:33 Jeremy StoneJeremy Stone 35044 gold badges1212 silver badges3030 bronze badges 4

• document.getElementByClassName doesn’t exist and the document.getElementsByClassName function that you mean doesn’t work like that at all. The arguments you’re giving that function aren’t even class names. – Sebastian Simon Commented Oct 7, 2015 at 23:37
• to check if your code is wrong make the var li = "<li> sample text </li>" if that doesnt shows up a list, you are doing it wrong – ivan Commented Oct 7, 2015 at 23:39
• If you are getting element by Id wouldn't you want to make sure you have an id in your inputs? you have it for the first input but not for the others. – Adam Buchanan Smith Commented Oct 7, 2015 at 23:46
• @AdamBuchananSmith was trying to make it work using one variable at first, edited – Jeremy Stone Commented Oct 7, 2015 at 23:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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>

本文标签： htmlAdd user input to list on button click in JavaScriptStack Overflow