[英]Cannot edit my TO-DO List web app using javascript
在我的代码中编辑 function 不起作用。 我尝试了几种不同的方法,但最终得到了同样的错误。 问题出在编辑 function 上,但我无法弄清楚。 我收到错误 Uncaught TypeError: edit is not a function”。
但我已经定义了编辑 function。我尝试添加它,但编辑给了我同样的错误。
添加和删除等其他功能可以使用,但我无法编辑我的项目列表。 请提出解决方案。
这是我的 javascript 代码:
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
//Event Listeners
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteTodo);
filterOption.addEventListener("click", filterTodo);
//Functions
function addTodo(e) {
//Prevent natural behavior
e.preventDefault();
//Create todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//Create list
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
//Save to local - do this last
//Save to local
saveLocalTodos(todoInput.value);
//
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
todoInput.value = "";
var edit = document.createElement('button');
edit.classList.add('edit');
edit.innerHTML = "EDIT";
edit.addEventListener('click', () => edit(e));
todoDiv.appendChild(edit);
//Create Completed Button
const completedButton = document.createElement("button");
completedButton.innerHTML = `<i class="fas fa-check"></i>`;
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Create trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//attach final Todo
todoList.appendChild(todoDiv);
}
function edit(e){
const item = e.target;
if(todoInput.disabled == true){
todoInput.disabled = !todoInput.disabled;
}
else{
todoInput.disabled = !todoInput.disabled;
let indexof = todos.indexOf(item);
todos[indexof] = todoInput.value;
window.localStorage.setItem("todos", JSON.stringify(todos));
}
}
function deleteTodo(e) {
const item = e.target;
if (item.classList[0] === "trash-btn") {
// e.target.parentElement.remove();
const todo = item.parentElement;
todo.classList.add("fall");
//at the end
removeLocalTodos(todo);
todo.addEventListener("transitionend", e => {
todo.remove();
});
}
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
console.log(todo);
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
}
});
}
function saveLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function removeLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
const todoIndex = todo.children[0].innerText;
todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
function getTodos() {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.forEach(function(todo) {
//Create todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//Create list
const newTodo = document.createElement("li");
newTodo.innerText = todo;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
todoInput.value = "";
var edit = document.createElement('button');
edit.classList.add('edit');
edit.innerHTML = "EDIT";
edit.addEventListener('click', () => edit(e));
todoDiv.appendChild(edit);
//Create Completed Button
const completedButton = document.createElement("button");
completedButton.innerHTML = `<i class="fas fa-check"></i>`;
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Create trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//attach final Todo
todoList.appendChild(todoDiv);
});
} ```
尝试将 function 重命名为“OnEditPress”。
您有一个名为“edit”的变量以及一个名为“edit”的 function。 尝试为这些使用不同的名称。
假设您已将方法重命名为 onEditPress,请不要忘记将事件 object 传递给重命名的编辑方法
edit.addEventListener('click', (e) => onEditPress(e));
在我的代码中编辑 function 不起作用。 我尝试了几种不同的方法,但最终得到了同样的错误。 问题在于编辑 function,但我无法弄清楚。 我收到错误 Uncaught TypeError: edit is not a function”。
但我已经定义了编辑 function。 我尝试添加这个,但编辑给了我同样的错误。
添加和删除等其他功能正在运行,但我无法编辑我的项目列表。 请提出解决方案。
这是我的 javascript 代码:
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
//Event Listeners
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteTodo);
filterOption.addEventListener("click", filterTodo);
//Functions
function addTodo(e) {
//Prevent natural behavior
e.preventDefault();
//Create todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//Create list
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
//Save to local - do this last
//Save to local
saveLocalTodos(todoInput.value);
//
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
todoInput.value = "";
var edit = document.createElement('button');
edit.classList.add('edit');
edit.innerHTML = "EDIT";
edit.addEventListener('click', () => edit(e));
todoDiv.appendChild(edit);
//Create Completed Button
const completedButton = document.createElement("button");
completedButton.innerHTML = `<i class="fas fa-check"></i>`;
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Create trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//attach final Todo
todoList.appendChild(todoDiv);
}
function edit(e){
const item = e.target;
if(todoInput.disabled == true){
todoInput.disabled = !todoInput.disabled;
}
else{
todoInput.disabled = !todoInput.disabled;
let indexof = todos.indexOf(item);
todos[indexof] = todoInput.value;
window.localStorage.setItem("todos", JSON.stringify(todos));
}
}
function deleteTodo(e) {
const item = e.target;
if (item.classList[0] === "trash-btn") {
// e.target.parentElement.remove();
const todo = item.parentElement;
todo.classList.add("fall");
//at the end
removeLocalTodos(todo);
todo.addEventListener("transitionend", e => {
todo.remove();
});
}
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
console.log(todo);
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
}
});
}
function saveLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function removeLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
const todoIndex = todo.children[0].innerText;
todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
function getTodos() {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.forEach(function(todo) {
//Create todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//Create list
const newTodo = document.createElement("li");
newTodo.innerText = todo;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
todoInput.value = "";
var edit = document.createElement('button');
edit.classList.add('edit');
edit.innerHTML = "EDIT";
edit.addEventListener('click', () => edit(e));
todoDiv.appendChild(edit);
//Create Completed Button
const completedButton = document.createElement("button");
completedButton.innerHTML = `<i class="fas fa-check"></i>`;
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Create trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//attach final Todo
todoList.appendChild(todoDiv);
});
} ```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.