javascript - 简单的待办事项列表不起作用

Question

我的待办事项列表不想按我想要的方式工作。我刚刚使用 JavaScript 工作了 2 周，这对我来说是非常新的，因此代码可能看起来不太好。

结果是错误的。如果我输入“buy food”，第一行会显示这个，但下次我想添加“walk the dog”时，它会显示

• 买食物
• 买食物
• 遛狗

希望您能理解我的问题。它还会在第一次点击后结束无序列表标签，并将其余内容添加到另一个标签中。

这是 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>