简单的ToDo-List不起作用

Question

My ToDo List dont wanna work the way i want. I've just been working with JavaScript for 2 weeks sthis is very new to me, therefor the code maybe doesnt look that nice.

The result comes out wrong. If I type in "buy food" the first line gonna show just that, but the next time I wanna add "walk the dog", then it displays

• buy food
• buy food
• walk the dog

I hope you understand my problem. It also ends the unordered list tag after the first click and adds the rest of the things in another.

Here's the 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

The issue is you're closing the ul tag after adding each item. Instead of concatenating raw HTML, consider using element objects and appending, and using a text node object to handle the user input - this removes the possibility of a DOM Based XSS vulnerability.

 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

On each call of function addToList() you should reset the variable text .

For example:

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

The whole list of items in array will appends to variable text on each call.

Answer 3

You should not use the innerHtml. This replace all the text of your content. You should just add the li to your ul. You can do that by using the append function by jquery Append

your <ul> must contain an id like this <ul id="toDoList">

then you make $("#toDoList").append("yourTask") ;

yourTask must contains the li.

With this, you don't need to iterate on all your element list

Answer 4

不确定，但你似乎第二次不断添加text了，所以文字就像<ul><li>buy food</li></ul><li>buy food</li><li>walk the dog</li></ul> ，顺便说一下，它是无效的HTML，但无论如何都要输出...