BLOG

jsメモ_φ(・_・②

おはようございます。

今日はちゃんと4時に起きれましたどうもハヤトワンです。

温かい格好して寝れば二度寝は解決できそう。←当たり前

今日も勉強した内容の復習です。

vanilla.jsでtodoリストを作る

前回の続き。

▼ボタンタグを作成(完了と削除)

const completeButton = document.createElement("button");
completeButton.innerText = "完了";
const deleteButton = document.createElement("button");
deleteButton.innnerText = "削除";

▼ divタグの子要素に入れる(前回のdiv.appendChild(li)の下に入れる)

div.appendChild(completeButton);
div.appendChild(deleteButton);

▼ボタンそれぞれにイベントを付与

completeButton.innerText = "完了"//この下
completeButton.addEventListener("click", () => {
  押された完了ボタンの親タグを未完了エリアから消す
   const deleteTarget = completeButton.parentNode;
   document.getElementById("incomplete-list").removeChild(deleteTarget);
});

deleteButton.innerText = "削除";//この下
deleteButton.addEventListener("click", () => {
  //押された削除ボタンの親タグを未完了エリアから消す
  const deleteTarget = deleteButton.parentNode;
  document.getElementById("incomplete-area").removeChild(deleteTarget);
});

▼削除機能が共通しているので関数化する

//未完了エリアからの指定の要素を削除
const deleteFromIncompleteArea = (target) => {
  document.getElementById("incomplete-area").removeChild(target);
}

▼先程のイベント付与した箇所を訂正

completeButton.innerText = "完了"//この下
completeButton.addEventListener("click", () => {
  //押された完了ボタンの親タグを未完了エリアから消す
  deleteFromIncompleteArea(completeButton.parentNode);
});


deleteButton.innerText = "削除";//この下
deleteButton.addEventListener("click", () => {
  //押された削除ボタンの親タグを未完了エリアから消す
   deleteFromIncompleteArea(deleteButton.parentNode);
});

からの

completeButton.innerText = "完了"//この下
completeButton.addEventListener("click", () => {
  //押された完了ボタンの親タグを未完了エリアから消す(ここに移動)
  deleteFromIncompleteArea(completeButton.parentNode);

 //完了エリアに追加する要素
const addTarget = completeButton.parentNode;
 //todo内容テキストを取得
const text = addTarget.firstElementChild.innerText;
 //div以下を初期化
addTarget.textContent = null;

 //liタグ生成
 const li = document.createElement("li");
 li.innerText = text;

  //buttonタグ生成
 const backButton = document.createElement("button");
  backButton.innerText = "戻す";

  //divタグの子要素に各要素を入れる
  addTarget.appendChild(li);
  addTarget.appendChild(backButton);

   //完了リストに追加
   document.getElementById("complete-area").appendChild(addTarget);  
 });

▼戻す機能を追加

  //buttonタグ生成
 const backButton = document.createElement("button");
  backButton.innerText = "戻す";
//ここに追加
backButton.addEventListener("click", () => {
  //押された戻すボタンの親タグを完了リストから削除
 const deleteTarget = backButton.parentNode;
  document.getElementById("complete-area").removeChild(deleteTarget);

 //テキスト取得
 const text = backButton.parentNode.firstElementChild.innerText;
});

▼未完了のエリアに追加する関数の共通化

//未完了エリアに追加する関数
const createIncompleteArea = (text) => {
      //div生成
    const div = document.createElement("div");
    div.className = "list-row";

    //liタグ生成
    const li = document.createElement("li");
    li.innerText = text;

    //完了ボタンを生成
    const completeButton = document.createElement("button");
    completeButton.innerText = "完了";
    completeButton.addEventListener("click", () => {
        //押された完了ボタンの親タグ(div)を未完了エリアから削除
        deleteFromIncompleteArea(completeButton.parentNode)

        //完了エリアに追加する要素
        const addTarget = completeButton.parentNode;

        //todo内容テキストを取得
        const text = addTarget.firstElementChild.innerText;

        //div以下を初期化
        addTarget.textContent = null;

        //liタグ生成
        const li = document.createElement("li");
        li.innerText = text;

        //buttonタグ生成
        const backButton = document.createElement("button");
        backButton.innerText = "戻す";
        backButton.addEventListener("click", () => {
            //押された戻すボタンの親タグ(div)を完了エリアから削除
            const deleteTarget = backButton.parentNode;
            document.getElementById("complete-area").removeChild(deleteTarget);

            //テキスト取得
            const text = backButton.parentNode.firstElementChild.innerText;
            
        })

        //divタグの子要素に各要素を設定
        addTarget.appendChild(li);
        addTarget.appendChild(backButton);

        //完了リストに追加
        document.getElementById("complete-area").appendChild(addTarget);
}

この関数を呼ぶ

const onClickAdd = () => {
  //テキストボックスの値を取得し、初期化する
 const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

 //ここ
  createIncompleteArea(inputText);
}

            //テキスト取得
            const text = backButton.parentNode.firstElementChild.innerText;
            createIncompleteArea(text);
        })

終わり。

参考にさせて頂いてる教材

非常に分かりやすいですm(_ _)m

https://www.udemy.com/course/modern_javascipt_react_beginner/

ありがとうございます!

それでは今日も良い1日を!