-1
我正在使用JavaScript中的T Do列表。它使用刪除和完整按鈕向列表中添加了一項新任務。點擊完成按鈕後，任務將被標記爲紅色。頂部還有一個任務計數器，底部還有一個刪除所有任務按鈕。所有這些功能都可以正常工作。但我希望根據給定的優先級來添加任務。優先級應該是1到10之間的整數，其中10是最高優先級，1是最低優先級。不幸的是，我爲這部分編寫的代碼似乎沒有工作。我添加了一個名爲index的新變量，用於存儲應該添加新項目的信息。你能幫我找出代碼的哪一部分必須改變嗎？那就是：待辦事項JavaScript中的優先級列表
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>
嗨喬安娜。你可以創建jsfiddle與你工作代碼沒有增加優先權功能？然後我會幫你的。 –
@Dominik [鏈接]（https://jsfiddle.net/pctruvad/） - 這是以前的版本，沒有檢查優先級的代碼。我不知道爲什麼jsfiddle不工作，代碼在瀏覽器中看起來很好 – Joanna