陷入困境，无法添加和管理要列出的多个JavaScript输入实例

Question

trying to do javascript app that should have 4 inputs - user, mail, phone address add new user / delete user details to/from the list buttons (popup should appear to confirm). Get stuck adding multiple users. here is the code in a jsfiddle

The var seem to be objects HTMLElements

<div class="container">
  <p>
    <label for="new-task">Add Item</label><input id="new" type="text"><input id="new" type="text"><input id="new" type="text"> <input id="new" type="text"><button>Add</button>
  </p>

  <h3>Todo</h3>
  <ul id="current-tasks">
    <li><label> Learn </label><button class="delete">Delete</button></li>
    <li><label>Read</label><button class="delete">Delete</button></li>

  </ul>    

  <script>

              var nameInput = document.getElementById("new-name"); 
              var emailInput = document.getElementById("new-email"); 
              var noInput = document.getElementById("new-phone"); 
              var zipInput = document.getElementById("new-zip"); 

          // var  = nameInput + " " + emailInput + " " + noInput +  " " + zipInput; 
          // console.log(nameInput);   
         //  console.log(taskInput.innerText);  

        //       var taskInput = nameInput.concat(emailInput);
        // document.querySelectorAll("new-name, new-email, new-number, new-zip");

         // var taskInput = nameInput + " " + emailInput + " " + noInput +  " " + zipInput;    
        //       var taskInput = nameInput.concat(emailInput);
        // document.querySelectorAll("new-name, new-email, new-number, new-zip");


              var addButton = document.getElementsByTagName("button")[0]; //first button
              var cTasksHolder = document.getElementById("current-tasks"); //current-tasks
              var delButton= document.getElementsByClassName("delete");

        //New Task List Item
        var createNewTaskElement = function(taskString) {
        //Create List Item
        var listItem = document.createElement("li");
        var label = document.createElement("label");
        var deleteButton = document.createElement("button");
          deleteButton.innerText = "Delete";
          deleteButton.className = "delete";
          label.innerText = taskString;
          //each element need  appending
            listItem.appendChild(label);
            listItem.appendChild(deleteButton);
          return listItem;
          alert(listItem);
        }

        // adauga task 
        var addTask = function() {
        console.log("Add task...");
        var nnameInput = nameInput.value;
          var    nemailInput = emailInput.value); 
        var nnoInput = noInput.value; 
        var       nzipInput = zipInput.value); 

        var tInput = [nnameInput, nemailInput , nnoInput,  nzipInput]; 
             var taskInput = tInput.join(", ");
        alert(taskInput.value);
          alert(taskInput);

        var listItem = createNewTaskElement(taskInput.value);
        console.log(taskInput.value);
        //apend listItems to imcomplete taskHolder (only if task is not null)
        if(taskInput.value) {
          cTasksHolder.appendChild(listItem);
          bindTaskEvents(listItem);
        } else {
          alert("You must enter the name , the email , the phone and the zip code.");
        }

        }
              var deleteTask = function() {
                console.log("Delete task...");
              var listItem = this.parentNode;
              var ul = listItem.parentNode;
              ul.removeChild(listItem);
        }

        var bindTaskEvents = function(taskListItem){
        console.log("Bind list item events");

         var deleteButton = taskListItem.querySelector("button.delete"); 
        deleteButton.onclick = deleteTask;
        }        addButton.onclick = addTask;

              for (var i = 0; i < cTasksHolder.children.length; i++) {
                  console.log(cTasksHolder.children[i]);

                bindTaskEvents(cTasksHolder.children[i]);
              }

 </script>

Answer 1

You are missing the call for the values of the inputs. When you call at the beginning the document.getElementById(), you use this var to create stuff, when what you need is it's value, like so:

var nameInput = document.getElementById("new-name")
var nnameInput = nameInput.value;

EDIT - There was multiple wrong things, I'll list them here along with an updated jsfiddle.

• In addTask, you had the line "console.log(string);;", it was crashing because of double ";" and because you were trying to print a 'string' var, that didn't exist.
• You didn't add ".value" when you call "nameInput" so the code was working with elements rather than strings.
• There was no need to write "var nnameInput = nameInput;" in function addTask
• You wrote "var listItem = createNewTaskElement(taskInput.value);" but there was no need for the value, as the taskInput is already a string that was joined by ',' previously.
• And you do the same as the above in the "if (taskInput.value) {", where it should be "if (taskInput) {"

http://jsfiddle.net/filipetedim/u27Lytqt/4/