Question

我正在使用JavaScript编写T-Do列表。它使用删除和完整按钮向列表添加新任务。单击完整按钮后，任务将标记为红色。顶部还有一个任务计数器，底部还有一个删除所有任务按钮。所有这些功能都可以正常工作。但我希望根据给定的优先级添加任务。优先级应该是1到10之间的整数，其中10是最高优先级，1是最小优先级。不幸的是，我为该部分编写的代码似乎并没有起作用。我添加了一个名为index的新变量，用于存储应添加新项目的信息。你能帮我找出代码的哪一部分需要改变吗？这是：

 document.addEventListener("DOMContentLoaded", function () {
     var add = document.getElementById("addTaskButton");
     var removeFinished = document.getElementById("removeFinishedTasksButton");
     var task = document.getElementById("taskInput");
     var list = document.getElementById("taskList");
     var body = document.querySelector("body");
     var prior = document.getElementById("taskPriority");

     //To do counter
     var toDo = document.createElement("span");
     body.insertBefore(toDo, list);
     var allTasks = document.querySelectorAll("li");
     var counter = allTasks.length;
     toDo.innerHTML = "Tasks to do: " + counter;
     //Add task
     add.addEventListener("click", function () {
         if (task.value.length >= 5 &&
         task.value.length <= 100 &&
         prior.value > 0 &&
         prior.value <= 10) {

     //Add task to the list
        var newTask = document.createElement("li");
        newTask.dataset.priority = prior.value;
        var all = document.querySelectorAll("li");

        for (var i = 0; i < all.length; i++) {
            var index = all.length;
            if (parseInt(newTask.dataset.priority) < parseInt(all[i].dataset.priority)) {
                index = i;
                break;
            }
        }

        list.insertBefore(newTask, list[index]);

        var taskName = document.createElement("h1");
        newTask.appendChild(taskName);
        taskName.innerHTML = task.value;

        //Add delete button
        var delBtn = document.createElement("button");
        newTask.appendChild(delBtn);
        delBtn.innerHTML = "Delete";
        delBtn.classList.add("delete");

        //Add complete button
        var complBtn = document.createElement("button");
        newTask.appendChild(complBtn);
        complBtn.innerHTML = "Complete";
        complBtn.classList.add("complete");

        counter++;
        toDo.innerHTML = "Tasks to do: " + counter;

        //Mark completed in red and adjust counter
        complBtn.addEventListener("click", function () {
            if (this.parentElement.style.color === "") {
                this.parentElement.style.color = "red";
                this.parentElement.setAttribute("done", "yes");
                counter--;
                toDo.innerHTML = "Tasks to do: " + counter;
            } else if (this.parentElement.style.color === "red") {
                this.parentElement.style.color = "";
                this.parentElement.removeAttribute("done");
                counter++;
                toDo.innerHTML = "Tasks to do: " + counter;
            }
        });

        //Delete selected item and adjust counter
        delBtn.addEventListener("click", function () {
            this.parentElement.parentNode.removeChild(this.parentElement);
            counter--;
            toDo.innerHTML = "Tasks to do: " + counter;
        });

        task.value = "";
        prior.value = "";

    } else {
        event.preventDefault();
        alert("Task should have from 5 to 100 characters. Priority should be an integer between 1 and 10");
    }
});

//Remove completed items
removeFinished.addEventListener("click", function () {
    var tasks = document.querySelectorAll("li");
    for (var i = 0; i < tasks.length; i++) {
        if (tasks[i].hasAttribute("done")) {
            tasks[i].parentNode.removeChild(tasks[i]);
        }
    }
});

});

这是HTML：

<body>

    <input id="taskInput" placeholder="Place your task here"><br>
    <input id="taskPriority" placeholder="Place task priority (1-10)"><br>
    <button id="addTaskButton">Add task</button>

    <ul id="taskList">

    </ul>

    <button id="removeFinishedTasksButton">Remove finished tasks</button>

 </body>

Answer 1

首先，index是在循环中声明的，所以不能在它之外使用它。您需要声明index以及循环的index outisde 的默认值，以使您的函数正常工作。

第二件事是，在第一次加载文档后，列表的值永远不会更新。您需要使用all数组来查找之前要插入的正确元素，而不是list。 list已在事件处理程序之外分配，因此它没有新数据，也不是li元素的集合，这是您在这种情况下所需的元素。

document.addEventListener("DOMContentLoaded", function () {
     var add = document.getElementById("addTaskButton");
     var removeFinished = document.getElementById("removeFinishedTasksButton");
     var task = document.getElementById("taskInput");
     var list = document.getElementById("taskList");
     var body = document.querySelector("body");
     var prior = document.getElementById("taskPriority");

     //To do counter
     var toDo = document.createElement("span");
     body.insertBefore(toDo, list);
     var allTasks = document.querySelectorAll("li");
     var counter = allTasks.length;
     toDo.innerHTML = "Tasks to do: " + counter;
     //Add task
     add.addEventListener("click", function () {
         if (task.value.length >= 5 &&
         task.value.length <= 100 &&
         prior.value > 0 &&
         prior.value <= 10) {

     //Add task to the list

        var newTask = document.createElement("li");
        newTask.dataset.priority = prior.value;
        var all = document.querySelectorAll("li");
        var index = all.length;
        
        for (var i = 0; i < all.length; i++) {
            if (parseInt(newTask.dataset.priority) < parseInt(all[i].dataset.priority)) {
                index = i;
                break;
            }
        }

        list.insertBefore(newTask, all[index]);
        var taskName = document.createElement("h1");
        newTask.appendChild(taskName);
        taskName.innerHTML = task.value;

        //Add delete button
        var delBtn = document.createElement("button");
        newTask.appendChild(delBtn);
        delBtn.innerHTML = "Delete";
        delBtn.classList.add("delete");

        //Add complete button
        var complBtn = document.createElement("button");
        newTask.appendChild(complBtn);
        complBtn.innerHTML = "Complete";
        complBtn.classList.add("complete");

        counter++;
        toDo.innerHTML = "Tasks to do: " + counter;

        //Mark completed in red and adjust counter
        complBtn.addEventListener("click", function () {
            if (this.parentElement.style.color === "") {
                this.parentElement.style.color = "red";
                this.parentElement.setAttribute("done", "yes");
                counter--;
                toDo.innerHTML = "Tasks to do: " + counter;
            } else if (this.parentElement.style.color === "red") {
                this.parentElement.style.color = "";
                this.parentElement.removeAttribute("done");
                counter++;
                toDo.innerHTML = "Tasks to do: " + counter;
            }
        });

        //Delete selected item and adjust counter
        delBtn.addEventListener("click", function () {
            this.parentElement.parentNode.removeChild(this.parentElement);
            counter--;
            toDo.innerHTML = "Tasks to do: " + counter;
        });

        task.value = "";
        prior.value = "";
         
    } else {

        event.preventDefault();
        alert("Task should have from 5 to 100 characters. Priority should be an integer between 1 and 10");
    }
});
  
//Remove completed items
removeFinished.addEventListener("click", function () {
    var tasks = document.querySelectorAll("li");
    for (var i = 0; i < tasks.length; i++) {
        if (tasks[i].hasAttribute("done")) {
            tasks[i].parentNode.removeChild(tasks[i]);
        }
    }
});

});

<body>

    <input id="taskInput" placeholder="Place your task here"><br>
    <input id="taskPriority" placeholder="Place task priority (1-10)"><br>
    <button id="addTaskButton">Add task</button>

    <ul id="taskList">

    </ul>

    <button id="removeFinishedTasksButton">Remove finished tasks</button>

 </body>

待办事项列表包含JavaScript

1 个答案: