堆棧內存溢出
  簡體   English   中英

無法使用 javascript 編輯我的待辦事項列表 web 應用程序

[英]Cannot edit my TO-DO List web app using javascript

 原文  2020-12-23 19:24:22  1   2    javascript/ html/ css

問題描述

在我的代碼中編輯 function 不起作用。 我嘗試了幾種不同的方法，但最終得到了同樣的錯誤。 問題出在編輯 function 上，但我無法弄清楚。 我收到錯誤 Uncaught TypeError: edit is not a function”。

但我已經定義了編輯 function。我嘗試添加它，但編輯給了我同樣的錯誤。

添加和刪除等其他功能可以使用，但我無法編輯我的項目列表。 請提出解決方案。

JSFiddle 鏈接到我的代碼

這是我的 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);
  });
} ```

2 個解決方案

解決方案1
 1  2020-12-23 19:28:21

嘗試將 function 重命名為“OnEditPress”。

您有一個名為“edit”的變量以及一個名為“edit”的 function。 嘗試為這些使用不同的名稱。

解決方案2
 0  2020-12-23 19:41:13

假設您已將方法重命名為 onEditPress，請不要忘記將事件 object 傳遞給重命名的編輯方法

edit.addEventListener('click', (e) => onEditPress(e));

解決方案3
 0  2020-12-23 19:41:21

在我的代碼中編輯 function 不起作用。 我嘗試了幾種不同的方法，但最終得到了同樣的錯誤。 問題在於編輯 function，但我無法弄清楚。 我收到錯誤 Uncaught TypeError: edit is not a function”。

但我已經定義了編輯 function。 我嘗試添加這個，但編輯給了我同樣的錯誤。

添加和刪除等其他功能正在運行，但我無法編輯我的項目列表。 請提出解決方案。

JSFiddle 鏈接到我的代碼

這是我的 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.

相關問題 創建編輯按鈕（待辦事項 APP） JavaScript 待辦事項 JavaScript 提交后在待辦事項列表上編輯我的輸入 嘗試為 Javascript 中的待辦事項列表應用程序進行過濾但苦苦掙扎 我似乎無法將項目推送到待辦事項列表中 使用純JavaScript刪除待辦事項列表中的列表項 在待辦事項列表上使用 localStorage 待辦事項清單和清單項目計算javascript JavaScript-動態任務列表-編輯列表 用於編輯待辦事項列表中的任務的編輯按鈕無法正常工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM