練習用：TODOリスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
color: #333;
}
#todoForm {
margin-bottom: 20px;
}
input[type="text"] {
padding: 8px;
width: 300px;
margin-right: 10px;
}
button {
padding: 8px 15px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
padding: 8px;
background: #e9ecef;
border-radius: 5px;
}
li button {
margin-left: 10px;
background-color: #dc3545;
}
</style>
</head>
<body>
<h1>ToDo List</h1>
<form id="todoForm">
<input type="text" id="todoInput" placeholder="Enter a task">
<button type="submit">Add</button>
</form>
<ul id="todoList"></ul>
<script src="app.js"></script>
</body>
</html>
// 必要なDOM要素を取得
const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');
// フォームの送信イベントを監視
todoForm.addEventListener('submit', function(event) {
event.preventDefault(); // ページリロードを防ぐ
const task = todoInput.value.trim(); // 入力値を取得しトリム
if (task !== "") {
addTask(task); // タスクを追加
todoInput.value = ""; // 入力欄をリセット
}
});
// タスクをリストに追加する関数
function addTask(task) {
const li = document.createElement('li');
li.textContent = task;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
li.remove(); // タスクを削除
});
li.appendChild(deleteButton);
todoList.appendChild(li);
}
1. event引数: todoFormのsubmitイベントが発生すると、イベントオブジェクトがevent引数として渡されます。このオブジェクトには、イベントに関する情報が含まれています。
2. trim()メソッド: todoInput.value.trim()を使用して、ユーザーが入力したタスクの文字列から前後の空白を取り除きます。これにより、空白だけの入力を防ぎます。
task変数: trim()で整形されたタスクの内容がtask変数に代入されます。この変数には、実際にリストに追加したいタスクの内容が格納されます。
addTask(task): task変数を引数としてaddTask関数が呼び出されます。この時、taskにはユーザーが入力したタスクの内容が渡されます。
5. createElement: addTask関数内で、document.createElement("li")を使用して新しいリストアイテム（li）を作成し、そのtextContentにtaskの内容を設定します。これにより、リストにタスクが表示されるようになります。