vendredi 18 novembre 2016

How do I make the checkbox work on newly created task?

I am writing a todo app using vanilla JavaScript to learn the language without using a library. In the app, you can add a task, complete task or un-complete task, edit and delete task. I have sample tasks that show the functionality in HTML. I have a function that adds a task to incomplete tasks section—each task item is wrapped in an li tag and has a checkbox, edit and delete buttons. The addTask function works perfectly. The problem I am having is in the selectbox part. The app is designed in a way that when checkbox of a task is selected, it indicates a task is completed and thus the item is shown in the completed tasks section. The function works for the items available on the page but not the ones added using the add functionality. How do I make the new task work? Thanks. Here is my code:

var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("competed-tasks");
var incompleteTextboxes = incompleteTasksHolder.querySelectorAll("input[type=checkbox]");

for (var i = 0; i < incompleteTextboxes.length; i++) {
  incompleteTextboxes[i].onfocus = function() {
    var item = this.parentNode;
    this.setAttribute("checked", "checked");
    completedTasksHolder.appendChild(item);
  }
}




Aucun commentaire:

Enregistrer un commentaire