I'm doing todo-list, and while it saves data in todo task row and completed. inside view https://jsfiddle.net/6rqfd103/ . I tried to save it as an array, I saved it, but couldn't get it outside and this is the code when I haven't done anything, show me how, I don't understand this place yet. explain to me. thank you very much
var newTaskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var todoTask = document.getElementById("incomplete-tasks");
var completeTask= document.getElementById("completed-tasks");
var createNewTaskElement = function(taskString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var editInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
var addTask = function() {
if(newTaskInput.value == ""){
alert("Nhap todoTask Item !");
return false;
}
var listItem = createNewTaskElement(newTaskInput.value);
todoTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
newTaskInput.value = "";
return true;
}
var editTask = function() {
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
if(containsClass) {
label.innerText = editInput.value;
} else {
editInput.value = label.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function() {
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
}
var taskCompleted = function() {
var listItem = this.parentNode;
completeTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
var taskIncomplete = function() {
var listItem = this.parentNode;
todoTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("Bind list item events");
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
addButton.addEventListener("click", addTask);
for(var i = 0; i < todoTask.children.length; i++) {
bindTaskEvents(todoTask.children[i], taskCompleted);
}
for(var i = 0; i < completeTask.children.length; i++) {
bindTaskEvents(completeTask.children[i], taskIncomplete);
}
You can try this for store HTML in local storage
window.localStorage.setItem('todoTask', todoTask.innerHTML);
window.localStorage.setItem('completeTask', completeTask.innerHTML);
todoTask.innerHTML = window.localStorage.getItem('todoTask');
completeTask.innerHTML = window.localStorage.getItem('completeTask');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.