todo list作りました。見れますよ。使えます。画面開いてる間だけねｗｗｗ
HTML部（CSSは貼り付け省略）
<html> <head> <title>TODO(Vanilla JS)</title> <meta charset="UTF-8" /> </head> <body> <div class="input-area"> <input id="add-text" placeholder="TODOを入力" /> <button id="add-button">追加</button> </div> <div class="incomplete-area"> <p class="title">未完了のTODO</p> <ul id="incomplete-list"></ul> </div> <div class="complete-area"> <p class="title">完了のTODO</p> <ul id="complete-list"></ul> </div> <script src="./index.mjs" type="module"></script> </body></html>
JavaScript部
import "./styles.css";const onClickAdd = () => { const inputText = document.getElementById("add-text").value; document.getElementById("add-text").value = ""; createIncompleteTodo(inputText);};// 渡された引数をもとに未完了のTODOを作成する関数;const createIncompleteTodo = (todo) => { // li生成 const li = document.createElement("li"); // div生成 const div = document.createElement("div"); div.className = "list-row"; // p生成 const p = document.createElement("p"); p.className = "todo-item"; p.innerText = todo; // button(完了)生成 const completeButton = document.createElement("button"); completeButton.innerText = "完了"; completeButton.addEventListener("click", () => { // 完了ボタンと削除ボタンを削除 const moveTarget = completeButton.closest("li"); completeButton.nextElementSibling.remove(); completeButton.remove(); // 戻すボタンの生成 const backButton = document.createElement("button"); backButton.innerText = "戻す"; backButton.addEventListener("click", () => { // TODOの内容を取得し未完了リストに追加 const todoText = backButton.previousElementSibling.innerText; createIncompleteTodo(todoText); backButton.closest("li").remove(); }); moveTarget.firstElementChild.appendChild(backButton); document.getElementById("complete-list").appendChild(moveTarget); }); // button(削除)生成 const deleteButton = document.createElement("button"); deleteButton.innerText = "削除"; deleteButton.addEventListener("click", () => { // closest 1番直近に出現する親タグのli const deleteTarget = deleteButton.closest("li"); document.getElementById("incomplete-list").removeChild(deleteTarget); }); // liに子要素を格納 div.appendChild(p); div.appendChild(completeButton); div.appendChild(deleteButton); li.appendChild(div); const ul = document.getElementById("incomplete-list"); ul.appendChild(li);};document.getElementById("add-button").addEventListener("click", onClickAdd);
ポイント！戻すボタンを押したらもう一度親の関数実行
// TODOの内容を取得し未完了リストに追加
const todoText = backButton.previousElementSibling.innerText;
createIncompleteTodo(todoText);
backButton.closest("li").remove();ここはなかなか我々ビギナーは思いつきません、、、
appendChildのルール
// appendChild というメソッドには、実は裏のルールがあります。
// 「すでに画面上のどこかにある要素を appendChild したら、
// 元の場所からは自動的に引き抜いて、新しい場所に移動させる」
// DOMの世界では、「1つの要素（liなど）は、同時に2箇所の親を持つことはできない」
// というルールがあります。そのため、新しい親（complete-list）に
// 「うちの子においで」と言われた瞬間、元の親（incomplete-list）との縁が
// 自動的に切れるようになっているんです。
document.getElementById(“complete-list”).appendChild(moveTarget);
コメントを残す