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中，你有一行＆＃34; console.log（string）;;＆＃34;，因为double＆＃34 ;;＆＃34;它崩溃了因为你试图打印一个＆＃39;字符串＆＃39; var，那不存在。
你没有添加＆＃34; .value＆＃34;当你打电话给＆＃34; nameInput＆＃34;所以代码使用的是元素而不是字符串。
无需编写＆＃34; var nnameInput = nameInput;＆＃34;在函数addTask
您写了＆＃34; var listItem = createNewTaskElement（taskInput.value）;＆＃34;但是没有必要使用该值，因为taskInput已经是一个由＆＃39;，＆＃39;加入的字符串。先前。
你在＆＃34; if（taskInput.value）{＆＃34;，它应该是＆＃34; if（taskInput）{＆＃34;

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

卡住添加和管理多个javascript输入实例列表

1 个答案: