堆棧內存溢出
  簡體   English   中英

創建編輯按鈕（待辦事項 APP） JavaScript

[英]Creating an edit button(to-do APP) JavaScript

 原文  2022-06-12 10:16:15  7   4    javascript

問題描述

所以我是 JavaScript 的完全初學者，我參加了一個待辦事項應用程序，但是當我進入編輯按鈕時，我只是沒有想法，嘗試輸入但似乎一切都出錯了，當我嘗試時我被卡住了用新值替換已編輯的項目。 任何想法或教程都會非常有幫助！ 我的代碼是這樣的： 

 const addButton = document.querySelector('#addButton'); const inputTask = document.querySelector('#inputTask'); const taskList = document.querySelector('#taskList'); const form = document.querySelector('#taskForm'); form.addEventListener('submit', function(e){ e.preventDefault(); const task = inputTask.value; if (!task) { alert('Please write down a task'); } else { const newLi = document.createElement('li'); newLi.innerText = task; newLi.setAttribute('li', 'readonly'); taskList.append(newLi); // this is the delete button: const deleteButton = document.createElement('button') deleteButton.innerText = "delete"; newLi.appendChild(deleteButton); deleteButton.addEventListener('click', deleting) // this is the edit button: const editButton = document.createElement('button'); editButton.innerText= "EDIT"; newLi.appendChild(editButton); editButton.addEventListener('click', editing); }; inputTask.value = "" ; }); // delete button make up function deleting(){ let forDelete = this.parentElement taskList.removeChild(forDelete); }; // edit button make up function editing() { let forEdit = this.parentElement; let input = document.createElement('input'); input.type = 'text'; input.value = forEdit.replaceWith(input); editButton.textContent = 'save'; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- <link rel="stylesheet" href="style.css" /> --> <title>to-DO list</title> </head> <body> <h1>To-DO</h1> <form id="taskForm"> <input type="text" placeholder="Write a task..." id="inputTask" /> <input type="submit" value="Add" id="addButton" /> </form> <ol id="taskList"> TASKS </ol> <!-- JAVASCRIPT --> <script src="script.js"></script> </body> </html>

4 個解決方案

解決方案1
 1  2022-06-12 11:41:28

您可能根本不需要編輯按鈕。 我認為“contenteditable”屬性使任何元素用戶都可以編輯。 如果你真的想要一個編輯按鈕，你可以讓按鈕切換 contenteditable 屬性。

解決方案2
 0 已采納  2022-06-12 11:56:55

我希望這個答案有用。

在我的回答中，我為 todos 內容添加了新標簽（ span ）。 當單擊edit按鈕以編輯待辦事項時，我會添加input標簽。 使用onblur更改保存。 

 const addButton = document.querySelector("#addButton"); const inputTask = document.querySelector("#inputTask"); const taskList = document.querySelector("#taskList"); const form = document.querySelector("#taskForm"); form.addEventListener("submit", function (e) { e.preventDefault(); const task = inputTask.value; if (!task) { alert("Please write down a task"); } else { const newLi = document.createElement("li"); const toDoContent = document.createElement("span"); // new tag for to-dos content toDoContent.innerText = task; newLi.append(toDoContent); newLi.setAttribute("li", "readonly"); taskList.append(newLi); // this is the delete button: const deleteButton = document.createElement("button"); deleteButton.innerText = "delete"; newLi.appendChild(deleteButton); deleteButton.addEventListener("click", deleting); // this is the edit button: const editButton = document.createElement("button"); editButton.innerText = "EDIT"; newLi.appendChild(editButton); editButton.addEventListener("click", (e) => editing(e.target.parentElement) ); } inputTask.value = ""; }); // delete button make up function deleting() { let forDelete = this.parentElement; taskList.removeChild(forDelete); } // edit button make up function editing(liTag) { let liContent = liTag.querySelector("span"); let input = document.createElement("input"); input.type = "text"; input.value = liContent.textContent; liTag.append(input); input.focus(); input.addEventListener("blur", () => { liContent.innerHTML = input.value; input.remove(); }); }
 <h1>To-DO</h1> <form id="taskForm"> <input type="text" placeholder="Write a task..." id="inputTask" /> <input type="submit" value="Add" id="addButton" /> </form> <ol id="taskList"> TASKS </ol>

解決方案3
 0  2022-06-12 13:12:03

更新

我再次嘗試編輯 OP 代碼並最終得到幾乎相同的代碼。 它更簡潔、更緊湊、更高效。 請記住，您不能獲取此代碼的一部分並期望它能夠工作。 如果它在片段上工作，如果將其全部復制而不粘貼到其他代碼中，它肯定會在其他地方工作。

問題

看起來您在提交處理程序中使用的引用無法從外部訪問（應該如此）。 這可能就是你撞牆的原因。 在editing()函數的末尾是這樣的：

editButton.textContent = 'save';

這搞砸了一切，因為editButton只存在於第一個函數中。 幸運的是，您需要做的就是用this替換editButton

this.textContent = 'Save';

有一些小問題，例如添加名為"li"的非標准屬性，其值為"readonly" ，如果將其制成屬性，則僅適用於表單控件和可編輯標簽。

  • 添加了<p>和一個隱藏的保存<button>到<li>
  • 將文本添加到<p>
  • 在編輯模式下， <p>啟用contenteditable屬性
  • 顯示保存按鈕，隱藏編輯按鈕
  • 當用戶完成編輯並單擊保存按鈕時， contenteditable被刪除，編輯按鈕被顯示，保存按鈕被隱藏。 

 const todo = document.forms.todo; todo.addEventListener('submit', addTask); function addTask(e) { e.preventDefault(); const IO = this.elements; const data = IO.task.value; const list = document.querySelector('ol'); const item = document.createElement('li'); const text = document.createElement('p'); text.textContent = data; IO.task.value = ""; item.append(text); list.append(item); const dumpBtn = document.createElement('button') dumpBtn.textContent = "Delete"; dumpBtn.type = 'button'; item.append(dumpBtn); dumpBtn.addEventListener('click', dumpTask) const editBtn = document.createElement('button'); editBtn.textContent = "Edit"; editBtn.type = 'button'; item.append(editBtn); editBtn.addEventListener('click', editTask); const saveBtn = document.createElement('button'); saveBtn.textContent = 'Save'; saveBtn.type = 'button'; saveBtn.classList.add('hide'); item.append(saveBtn); saveBtn.addEventListener('click', saveEdit); } function dumpTask(e) { this.parentElement.remove(); } function editTask(e) { const item = this.parentElement; const text = item.firstElementChild; text.setAttribute('contenteditable', true); this.classList.add('hide'); this.nextElementSibling.classList.remove('hide'); } function saveEdit(e) { const item = this.parentElement; const text = item.firstElementChild; text.removeAttribute('contenteditable'); this.classList.add('hide'); this.previousElementSibling.classList.remove('hide'); }
 html { font: 300 2ch/1.2 'Segoe UI'; } legend { font-size: 1.5rem; line-height: 1.7; } input, button { font: inherit; } button { margin: 0 2px; cursor: pointer; } li { height: 2.4rem; } li::marker { font-size: 1.2rem; line-height: 1 } li * { display: inline-block; vertical-align: baseline; } li p { padding: 2px 6px 3.5px; border-radius: 2px; } [contenteditable] { background: rgba(0, 0, 0, 0.5); color: gold; } .hide { display: none }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>to-DO list</title> </head> <body> <form id="todo"> <fieldset> <legend>ToDO</legend> <input id='task' type="text" placeholder="Write a task..." required> <button>Add</button> <ol></ol> </fieldset> </form> </body> </html>

解決方案4
 0  2022-06-13 11:56:07

感謝您的幫助，我還不能真正理解切換的工作原理。 它的語法和用途。 因此，我為解決此問題所做的就是實施您的所有建議。 對我有用的代碼是：

const addButton = document.querySelector('#addButton');
const inputTask = document.querySelector('#inputTask');
const taskList = document.querySelector('#taskList');
const form = document.querySelector('#taskForm');

// what is left is:
// add a complete button for each task or when click on task add a straight line



form.addEventListener('submit', function(e){
    e.preventDefault();
    const task = inputTask.value;
    if (!task) {
        alert('Please write down a task');
    } else {
        const newLi = document.createElement('li');
        const para = document.createElement('para'); // NEW ADD
        const menu = document.createElement('menu')    
        newLi.append(para);
        newLi.append(menu);
        para.textContent = task;
        taskList.append(newLi);
        para.setAttribute('contenteditable', false);
        // this is the delete button:
        const deleteButton = document.createElement('button')
        deleteButton.textContent = "delete";
        deleteButton.type = 'button'
        menu.appendChild(deleteButton);
        deleteButton.addEventListener('click', deleting)

        // this is the edit button:

        const editButton = document.createElement('button');
        editButton.textContent= "Edit";
        editButton.type = 'button';
        menu.appendChild(editButton);
        editButton.addEventListener('click', function(){
            para.setAttribute('contenteditable', true);
            let saveButton = document.createElement('button');
            saveButton.textContent = 'Save';
            editButton.replaceWith(saveButton);
            saveButton.addEventListener('click', function(){
                para.setAttribute('contenteditable', false);
                saveButton.replaceWith(editButton);
            });
        });
        
    };
    inputTask.value = "" ; 
    
 });

// delete button make up

function deleting(){
    this.closest('li').remove();
};

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無法使用 javascript 編輯我的待辦事項列表 web 應用程序 用於編輯待辦事項列表中的任務的編輯按鈕無法正常工作 Vanilla Javascript：待辦事項列表未在單擊提交按鈕時創建 li 並且 event.preventDefault() 不起作用 在JavaScript待辦事項應用程式中建立計數器 創建待辦事項清單 如何進行編輯 function 以替換待辦事項應用程序的現有文本？ 待辦事項 JavaScript 嘗試為 Javascript 中的待辦事項列表應用程序進行過濾但苦苦掙扎 To Do App JavaScript 的編輯按鈕出現問題 如何在純 javascript 中改進這個簡單的待辦事項應用程序中的過濾
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM