Simple ToDo-List doesn't work
My ToDo List doesn't want to work the way I want. I just worked with JavaScript for 2 weeks. This is very new to me, so the code might not look that nice.
The result is wrong. If I type "buy food" the first line shows exactly that, but next time I want to add "walk the dog" then it displays
- buy products
- buy products
- dog walk
Hope you can understand my problem. It also ends the unordered list tag after the first click and adds the rest of the stuff to 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;
}
source to share
The problem is you are closing the ul tag after each element has been added. Instead of concatenating raw HTML, consider using element objects and adding and using a text node object to handle user input - this removes the possibility of an XSS-based DOM-based 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>
source to share
Each time addToList()
you call the function, you must 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 entire list of elements in the array will be added to the variable text
for each call.
source to share
Can't use innerHtml. This will replace all of your content text. You should just add li to your ul. You can do this using the append jquery Append function
yours <ul>
should contain an id like<ul id="toDoList">
then you do $("#toDoList").append("yourTask")
;
yourTask must contain li.
That being said, you don't need to iterate over all lists of elements
source to share