简单的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，但无论如何都要输出...