創建編輯按鈕（待辦事項APP）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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

我希望這個答案有用。

在我的回答中，我span為 todos 內容添加了新標簽 ()。當點擊按鈕編輯待辦事項時，我會添加input標簽。更改保存edit。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>

uj5u.com熱心網友回復：

問題

看起來您在提交處理程式中使用的參考無法從外部訪問（應該如此）。這可能就是你撞墻的原因。函式的最后editing()是這樣的：

editButton.textContent = 'save';

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

this.textContent = 'Save';

有一些小問題，例如添加一個非標準屬性，如果將"li"其值命名為屬性"readonly"，則該屬性僅適用于表單控制元件和可編輯標簽。

一種更好的方式 IMO

添加到<p>_<menu><li>
添加洗掉和編輯按鈕到<menu>
將文本添加到<p>
在編輯模式下，<p>getscontenteditable屬性啟用
類.save被添加到編輯按鈕
單擊處理程式也添加到編輯按鈕
當用戶完成編輯并單擊保存按鈕時，單擊contenteditable處理程式將從編輯按鈕中洗掉。

const todo = document.forms.taskForm;

todo.addEventListener('submit', function(e) {
  e.preventDefault();
  const task = this.elements.task;
  const taskText = task.value;
  if (!taskText) {
    alert('Please write down a task');
  } else {
    const list = document.querySelector('.list');
    const item = document.createElement('li');
    const menu = document.createElement('menu');
    const para = document.createElement('p');

    item.append(para);
    item.append(menu);
    para.textContent = taskText;

    list.append(item);

    const deleteBtn = document.createElement('button')
    deleteBtn.textContent = "Delete";
    deleteBtn.type = 'button';
    menu.appendChild(deleteBtn);
    deleteBtn.addEventListener('click', deleteItem)

    const editBtn = document.createElement('button');
    editBtn.textContent = "Edit";
    editBtn.type = 'button';
    menu.appendChild(editBtn);
    editBtn.addEventListener('click', editItem);
  };
  task.value = "";
});

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

function editItem() {
  let item = this.closest('li');
  let text = item.querySelector('p');
  text.setAttribute('contenteditable', true);
  this.textContent = 'Save';
  this.classList.toggle('save');
  this.addEventListener('click', saveEdit)
}

function saveEdit() {
  let item = this.closest('li');
  let text = item.querySelector('p');
  text.removeAttribute('contenteditable');
  this.textContent = 'Edit';
  this.classList.toggle('save');
  this.removeEventListener('click', saveEdit);
}

li * {
  display: inline-block;
}

li p {
  padding: 2px 6px;
  border-radius: 4px;
}

[contenteditable] {
  background: rgba(0, 0, 0, 0.5);
  color: gold;
}

<!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="todo">
    <input type="text" placeholder="Write a task..." id="task" />
    <button>Add</button>
  </form>
  <ol class="list">
    TASKS
  </ol>

  <!-- JAVASCRIPT -->
  <script src="script.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/488792.html

標籤：javascript

上一篇：為什么不呼叫document.onload？

下一篇：查找串列中不包括某個字符的最頻繁元素