【JavaScript】既存のリストを編集する方法(ToDoList)

はじめに

JavaScriptでToDoListを作った際に、あまり参考にできる記事が見つからず、難しかったと感じたコードについて記事を書いてみました。良かったら参考にしてみてください！

解説

作成した既存のリストの編集ボタンを押すと文字がフォームに変わってその場で編集できるようにしてみます！さらには編集時には既存のボタンを削除し、保存ボタンにして編集内容が保存されるようにします。

index.js

// 編集ボタンクリック
const editTask = (id) => {
  const currentList = todos.find((todo) => {
    return todo.id === id;
  });

  const listParentNode = document.getElementById(`div-${id}`);
  // ここでのdiv-${id}はのちに作成した親要素のidのvalueです。

  // 子要素取得
  const text = listParentNode.children[1];
  const editBtn = listParentNode.children[2];
  const deleteBtn = listParentNode.children[3];

  const editForm = document.createElement("input");
  // 下記のコードは編集時に既存の文を残すためにあります。
  editForm.value = text.innerText;
  editForm.className = "text"
  listParentNode.replaceChild(editForm, text);

  const addBtn = document.createElement("button");
  addBtn.innerText = "保存";
  addBtn.className = "btn";
  listParentNode.appendChild(addBtn);

  // 下記のコードは既存のボタンを一時的になくすものです。後に出てくるstyle.displayを"block"にすることで元に戻すことができます。
  editBtn.style.display = "none";
  deleteBtn.style.display = "none";

  // 保存ボタンクリック
  addBtn.addEventListener("click", () => {
    if(editForm.value) {
      currentList.value = editForm.value;

      const newText = document.createElement("li");
      newText.innerText = currentList.value;
      newText.className = "text";

      listParentNode.replaceChild(newText, editForm);
      // 保存した後は既存のボタンを元通りに戻します。最後に保存ボタンを削除します。
      editBtn.style.display = "block";
      deleteBtn.style.display = "block";
      listParentNode.removeChild(addBtn);
    };
  });
}

sytle.display プロパティとは、要素の表示に関する CSS の display の参照や更新ができるプロパティです。ボタンクリックで対象要素の 表示/非表示 を切り替えたり、JavaScript で要素を組み立てたりする際に使用できます。
使い方は対象要素.style.display = "block"で対象要素が表示されます。
反対に対象要素.style.display = "none"で対象要素が非表示になります。
とても便利なものですね！

参考記事

• https://magazine.techacademy.jp/magazine/33333