我的代码中的编辑功能不起作用。 我尝试了几种不同的方法,但最终得到了相同的错误。 问题出在编辑功能上,但我无法弄清楚。我收到错误 Uncaught TypeError: edit is not a 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);
});
} ```
答案 0 :(得分:1)
尝试将函数重命名为“OnEditPress”。
您有一个名为“edit”的变量和一个名为“edit”的函数。尝试为这些使用不同的名称。
答案 1 :(得分:0)
假设您已将方法重命名为 onEditPress,请不要忘记将事件对象传递给您重命名的编辑方法
edit.addEventListener('click', (e) => onEditPress(e));