點擊編輯按鈕後，舊內容會回到輸入框，程式也會透過 editingId 記住目前正在修改哪一則筆記。

但我實際把整個流程重新想了一次，發現少了一個很普通、卻不能沒有的操作：

如果使用者突然不想改了，該怎麼辦？

目前一旦進入編輯模式，就只能完成修改。就算把輸入框清空，程式仍然記得原本的 editingId，下一次按下儲存時，依然會嘗試更新那則筆記。

所以今天要替 Idea Note 加入「取消編輯」。

這次給 Codex 的需求

這次的任務是：

進入編輯模式時顯示取消按鈕。點擊取消後，清空輸入框、將 editingId 重設為 null、移除錯誤提示，並把儲存按鈕文字改回「新增筆記」。平常新增筆記時不要顯示取消按鈕。

這次沒有新增新的資料功能，主要是在整理畫面與程式狀態。

取消編輯不只是清空輸入框

一開始我以為，取消編輯只需要：

noteInput.value = "";

但這樣只改變了畫面。

程式裡的 editingId 仍然保留著原本的筆記編號，所以它還是處於編輯模式。

真正的取消至少要完成這些動作：

function cancelEdit() {
  editingId = null;
  noteInput.value = "";
  errorMessage.textContent = "";
  saveButton.textContent = "新增筆記";
  cancelButton.hidden = true;
  noteInput.focus();
}

每一行分別負責：

• 清除目前正在編輯的筆記編號
• 清空輸入框
• 移除舊的錯誤提示
• 將按鈕文字改回新增狀態
• 隱藏取消按鈕
• 讓游標回到輸入框

少處理其中一項，都可能讓畫面與程式狀態對不起來。

取消按鈕不應該一直出現

在一般新增模式下，畫面上沒有任何需要取消的操作。

如果取消按鈕一直顯示，使用者可能會疑惑：我現在是要取消什麼？

因此，取消按鈕預設先隱藏：

<button id="cancelButton" hidden>取消編輯</button>

點擊某則筆記的編輯按鈕後，再顯示它：

cancelButton.hidden = false;

編輯完成或取消編輯時，重新將它隱藏：

cancelButton.hidden = true;

這樣畫面會跟著目前狀態改變。

新增模式只顯示「新增筆記」，進入編輯模式後才出現「更新筆記」與「取消編輯」。

可以把重複的重設動作整理成函式

做到這裡，我發現「完成編輯」和「取消編輯」其實有很多相同動作。

兩種情況都需要：

• 將 editingId 重設為 null
• 清空輸入框
• 移除錯誤提示
• 恢復儲存按鈕文字
• 隱藏取消按鈕

如果把相同程式分別寫在兩個地方，以後調整其中一邊時，很容易忘記修改另一邊。

所以可以另外建立一個函式：

function resetForm() {
  editingId = null;
  noteInput.value = "";
  errorMessage.textContent = "";
  saveButton.textContent = "新增筆記";
  cancelButton.hidden = true;
  noteInput.focus();
}

更新成功後呼叫：

resetForm();

取消編輯時也呼叫：

cancelButton.addEventListener("click", resetForm);

這樣所有「回到新增模式」的動作只需要維護一份。

如果正在編輯的筆記被刪除了呢？

今天還想到一個比較容易忽略的情況。

假設使用者先點擊某則筆記的編輯按鈕，內容已經出現在輸入框裡；接著那則筆記又被刪除了。

此時資料已經不存在，但 editingId 可能還保存著它的編號。

如果繼續按下更新，程式會找不到原本的筆記。

因此，刪除功能需要多判斷一次：

if (editingId === id) {
  resetForm();
}

只有刪除的筆記剛好是目前正在編輯的那一則，才需要離開編輯模式。

如果刪除的是其他筆記，輸入框裡正在修改的內容則不應受到影響。

今天要測試的情況

這次需要確認：

1. 一般新增模式下，不會顯示取消按鈕。
2. 點擊編輯後，取消按鈕會出現。
3. 點擊取消後，輸入框會清空。
4. 儲存按鈕會恢復成「新增筆記」。
5. 取消後輸入新內容，會新增筆記而不是覆蓋舊資料。
6. 刪除正在編輯的筆記時，畫面會回到新增模式。
7. 刪除其他筆記時，不會中斷目前的編輯。

今天處理的不是新的主要功能，而是避免程式卡在一個已經失效的狀態。

新增、編輯和刪除現在已經可以互相配合，但目前所有資料仍然只存在程式執行期間。只要重新整理頁面，筆記就會消失。

下一篇，我會正式使用 localStorage 保存筆記，讓內容在重新整理後仍然留在瀏覽器裡。