簡單的ToDo-List不起作用

Question

我的待辦事項清單不想按我想要的方式工作。 我剛剛使用JavaScript工作了兩個星期這對我來說很新，因此代碼可能看起來不太好看。

結果出錯了。 如果我輸入“購買食物”，第一行就會顯示，但下次我想添加“遛狗”，然后顯示

• 買食物
• 買食物
• 遛狗

我希望你理解我的問題。 它還會在第一次單擊后結束無序列表標記，並將其余內容添加到另一個中。

這是JavaScript：

var taskList = [];

var text = "<ul>"

function addToList() {
    var task = document.getElementById("toDoTask").value;
    taskList.push(task);

    for(i = 0; i < taskList.length; i++){
        text += "<li>" + taskList[i] + "</li>" ;
    }

    text += "</ul>";

    document.getElementById("todoList").innerHTML = text;
}

Answer 1

問題是您在添加每個項目后關閉了ul標記。 而不是連接原始HTML，考慮使用元素對象和追加，並使用文本節點對象來處理用戶輸入 - 這消除了基於DOM的XSS漏洞的可能性。

 window.onload = function() { var taskList = []; var container = document.getElementById("todoList"); document.getElementById("add").onclick = addToList; function addToList() { var task = document.getElementById("toDoTask").value; taskList.push(task); var ul = document.createElement('ul'); var li; for (i = 0; i < taskList.length; i++) { li = document.createElement('li'); li.appendChild(document.createTextNode(taskList[i])) ul.appendChild(li); } container.innerHTML = ''; container.appendChild(ul); } }; 

 Task: <input id="toDoTask" /> <input type="button" id="add" value="Add" /> <div id="todoList"> </div> 

Answer 2

在函數addToList()每次調用中，您應該重置變量text 。

例如：

function addToList() {
  var task = document.getElementById("toDoTask").value;
  taskList.push(task);

  text="";

  for(i = 0; i < taskList.length; i++){
      text += "<li>" + taskList[i] + "</li>" ;
  }

  text += "</ul>";

  document.getElementById("todoList").innerHTML = text;
}

數組中的整個項目列表將附加到每次調用的變量text 。

Answer 3

你不應該使用innerHtml。 這將替換您內容的所有文本。 你應該把li添加到你的ul。 您可以通過使用jquery Append的append函數來實現

你的<ul>必須包含這樣的id <ul id="toDoList">

然后你做$("#toDoList").append("yourTask") ;

yourTask必須包含li。

有了這個，您不需要迭代所有元素列表

Answer 4

不確定，但你似乎第二次不斷添加text了，所以文字就像<ul><li>buy food</li></ul><li>buy food</li><li>walk the dog</li></ul> ，順便說一下，它是無效的HTML，但無論如何都要輸出...