環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0(23A344)
Homebrew 4.3.8
gh 2.52.0
ソースコード外観
HTML
<!DOCTYPE html>
<html>
<head>
<title>ToDo(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">
<!-- 完成系の例としてliタグ以下を作成している
<li>
<div class="list-row">
<p class="todo-item">ToDoです</p>
<button>完了</button>
<button>削除</button>
</div>
</li> -->
</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 = "";
// 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 = inputText;
// button(完了)タグ生成
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
completeButton.addEventListener("click", () => {
alert("完了");
});
// button(削除)タグ生成
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
deleteButton.addEventListener("click", () => {
alert("削除");
});
// liタグの子要素に各要素を設定
div.appendChild(p);
div.appendChild(completeButton);
div.appendChild(deleteButton);
li.appendChild(div);
// id="incomplete-list"の`ul`タグに子要素を設定した`li`タグを追加
document.getElementById("incomplete-list").appendChild(li);
};
document.getElementById("add-button").addEventListener("click", onClickAdd);
手順
-
HTMLファイルにテキストボックスとなる
div
tagにinput
tagとbutton
tagを設定する<input id="add-text" placeholder="ToDoを入力" /> <button id="add-button">追加</button>
-
JSファイルにHTMLファイルの
add-button
がclickされた際に、onClick
関数が動くようにするdocument.getElementById("add-button").addEventListener("click", onClickAdd);
-
テキストボックスの値を取得し、初期化する
const inputText = document.getElementById("add-text").value; document.getElementById("add-text").value = "";
-
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 = inputText;
-
button(完了)タグ生成
const completeButton = document.createElement("button"); completeButton.innerText = "完了"; // 仮の`click`イベントとして`alert("完了")`で設定している = clickされた時の関数はここに記載していく completeButton.addEventListener("click", () => { alert("完了"); });
-
button(削除)タグ生成
deleteButton.innerText = "削除"; // 仮の`click`イベントとして`alert("削除")`で設定している = clickされた時の関数はここに記載していく deleteButton.addEventListener("click", () => { alert("削除"); });
-
liタグの子要素に各要素を設定
完成例として作成しているhtmlを参考にすると良いdiv.appendChild(p); div.appendChild(completeButton); div.appendChild(deleteButton); li.appendChild(div);
※HTMLファイルから一部抜粋
<!-- 完成例としてliタグ以下を作成している <li> <div class="list-row"> <p class="todo-item">ToDoです</p> <button>完了</button> <button>削除</button> </div> </li> -->
-
id="incomplete-list"の
ul
タグに子要素を設定したli
タグを追加document.getElementById("incomplete-list").appendChild(li);
Tips
JavaScript
からHTMLにアクセスできるように、識別が必要なtag
にはid
を追加する。