昨天替每一則筆記加入刪除按鈕後，Idea Note 已經可以新增與刪除內容。

今天要處理下一個核心功能：編輯筆記。

我原本以為編輯很簡單，只要把原本的文字放回輸入框，修改完再按一次儲存就好。

但實際拆開後，馬上遇到一個問題：

按下同一個儲存按鈕時，程式怎麼知道我要新增一則筆記，還是更新原本的筆記？

如果沒有區分這兩種狀態，修改完再按儲存，很可能只是新增另一則內容，原本的筆記完全沒有變。

這次給 Codex 的需求

這次我只請 Codex 處理最基本的編輯流程：

請替每一則筆記加入編輯按鈕。點擊後，將原本的內容帶回輸入框；使用者修改並按下儲存時，更新原本的筆記，不要新增另一則。這次不要修改刪除功能。

整個流程可以拆成：

1. 點擊某則筆記的編輯按鈕。
2. 透過 id 找到對應資料。
3. 將舊內容放進輸入框。
4. 記住目前正在編輯哪一則。
5. 按下儲存後更新原本資料。
6. 完成後回到新增模式。

使用 find() 找到指定筆記

刪除時使用 filter() 留下其他資料；編輯時則需要先找到目標筆記。

這裡可以使用 find()：

const note = notes.find((note) => note.id === id);

find() 會逐一檢查陣列，找到第一筆符合條件的資料後就停止。

取得筆記後，就能把內容放回輸入框：

noteInput.value = note.content;
noteInput.focus();

使用者不必重新輸入整段文字，只需要修改其中一部分。

把內容放回去還不夠

這時畫面看起來已經進入編輯狀態，但程式其實還不知道這段文字來自哪一則筆記。

因此，我需要另外記住目前正在編輯的筆記 id：

let editingId = null;

平常沒有編輯任何筆記時，editingId 是 null。

按下編輯按鈕後，才把目標筆記的編號存進去：

function editNote(id) {
  const note = notes.find((note) => note.id === id);

  if (!note) {
    return;
  }

  editingId = id;
  noteInput.value = note.content;
  noteInput.focus();
}

這樣程式才真正知道，目前輸入框裡的內容不是全新的筆記，而是某筆舊資料。

同一個按鈕，兩種功能

有了 editingId 之後，按下儲存時就能判斷目前是哪一種狀態：

if (editingId === null) {
  // 新增筆記
} else {
  // 更新筆記
}

如果 editingId 是 null，就執行原本的新增流程。

如果裡面有某則筆記的 id，就找出那筆資料並更新內容：

const note = notes.find((note) => note.id === editingId);

if (note) {
  note.content = content;
}

這次沒有建立新的筆記物件，所以資料數量不會增加，原本的 id 也會保留下來。

編輯完成後要重設狀態

更新成功後，還要把 editingId 改回 null：

editingId = null;
noteInput.value = "";
renderNotes();
noteInput.focus();

如果忘記重設，下一次輸入新內容時，程式可能仍然以為使用者正在編輯上一則筆記。

結果不是新增成功，而是再次覆蓋舊內容。

這種錯誤不一定會立刻出現。通常要編輯完一則筆記，再新增下一則時才會發現。

畫面也要讓使用者知道目前的狀態

程式知道自己正在編輯，不代表使用者也知道。

如果點擊編輯後，儲存按鈕仍然寫著「新增筆記」，操作上會有點混亂。

因此，進入編輯模式時可以改變按鈕文字：

saveButton.textContent = "更新筆記";

完成更新後，再改回：

saveButton.textContent = "新增筆記";

只改幾個字，就能讓目前的操作狀態清楚很多。

今天要測試的情況

這次至少要確認：

1. 點擊編輯後，正確內容會出現在輸入框。
2. 修改並儲存後，原本的筆記會更新。
3. 編輯後，筆記數量不會增加。
4. 其他筆記不會一起被修改。
5. 編輯完成後，可以正常新增下一則筆記。
6. 將內容改成空白時，仍然不能儲存。

最後一項會沿用前面完成的空白防呆。

即使目前是編輯模式，也不能把一則筆記更新成完全沒有內容的狀態。

今天完成後，Idea Note 已經有基本的新增、編輯與刪除功能。

不過現在進入編輯模式後，還沒有「取消」的選項。如果使用者突然不想修改，只能重新整理頁面或手動處理輸入框。

下一篇，我會加入取消編輯功能，並讓畫面和程式狀態一起回到新增模式。