Question

我的待办事项列表不想以我想要的方式工作。我刚刚使用JavaScript工作了两个星期这对我来说很新鲜，因此代码可能看起来不太好。

结果出错了。如果我输入＆＃34;购买食物＆＃34;第一行就会显示出来，但下次我想添加＆＃34;遛狗＆＃34;，然后显示

买食物
买食物
遛狗

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

以下是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漏洞的可能性。

＆＃13;

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);
  }

};

＆＃13;

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

＆＃13;

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

使用追加功能来实现

您的<ul>必须包含类似此<ul id="toDoList">

的ID

然后你制作$("#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，但无论如何都要输出...... < / p>

简单的ToDo-List不起作用

4 个答案: