JavaScript中具有优先级的待办事项列表

我正在用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]);
        }
    }
});

});

document.addEventListener（“DOMContentLoaded”，函数（）{
var add=document.getElementById（“addTaskButton”）；
var removeFinished=document.getElementById（“removeFinishedTaskButton”）；
var task=document.getElementById（“taskInput”）；
var list=document.getElementById（“任务列表”）；
var body=document.querySelector（“body”）；
var prior=document.getElementById（“任务优先级”）；
//对付
var toDo=document.createElement（“span”）；
body.insertBefore（toDo，list）；
var allTasks=document.querySelectorAll（“li”）；
var counter=allTasks.length；
toDo.innerHTML=“要执行的任务：”+计数器；
//添加任务
add.addEventListener（“单击”），函数（）{
如果（task.value.length>=5&&
task.value.length 0&&
prior.value第一件事是
index
是在循环内声明的，因此不能在循环外使用。您需要声明
index
，并且
index
out的默认值是循环的一部分，这样函数才能工作

第二件事是，在第一次加载文档后，列表的值从未得到更新。您需要使用
all
数组来查找要插入的正确元素，而不是
list
list
被分配到事件处理程序之外，因此它没有新数据，也不是一个集合在
li
元素上，这是本例中所需的元素


document.addEventListener（“DOMContentLoaded”，函数（）{
var add=document.getElementById（“addTaskButton”）；
var removeFinished=document.getElementById（“removeFinishedTaskButton”）；
var task=document.getElementById（“taskInput”）；
var list=document.getElementById（“任务列表”）；
var body=document.querySelector（“body”）；
var prior=document.getElementById（“任务优先级”）；
//对付
var toDo=document.createElement（“span”）；
body.insertBefore（toDo，list）；
var allTasks=document.querySelectorAll（“li”）；
var counter=allTasks.length；
toDo.innerHTML=“要执行的任务：”+计数器；
//添加任务
add.addEventListener（“单击”），函数（）{
如果（task.value.length>=5&&
task.value.length 0&&
Previor.value Hi Joanna。你能在没有添加优先级功能的情况下使用代码创建JSFIDLE吗？然后我可以帮助你。@Dominik-这是以前的版本，没有检查优先级的代码。我不知道JSFIDLE为什么不工作，代码在浏览器中看起来很好
<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>