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

Question

尝试做应具有4个输入的javascript应用-用户，邮件，电话地址添加新用户/从列表按钮删除用户详细信息（应显示弹出窗口以确认）。 陷入添加多个用户的困境。 这是jsfiddle中的代码

var似乎是对象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

您缺少对输入值的调用。 当您在document.getElementById（）开头调用时，使用此var创建内容，当您需要的是它的值时，就像这样：

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

编辑 -有很多错误的地方，我将在这里与更新的jsfiddle一起列出。

• 在addTask中，您有“ console.log（string）;;”行，由于双“;”而崩溃。 并且因为您尝试打印“字符串” var，所以该变量不存在。
• 调用“ nameInput”时没有添加“ .value”，因此代码使用的是元素而不是字符串。
• 无需编写“ var nnameInput = nameInput;” 在函数addTask中
• 您写了“ var listItem = createNewTaskElement（taskInput.value）;” 但是不需要该值，因为taskInput已经是一个以前由'，'连接的字符串。
• 并且您在“ if（taskInput.value）{”中执行上述操作，其中应为“ if（taskInput）{”

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