Skip to content

Instantly share code, notes, and snippets.

@itochan
Last active Nov 1, 2019
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoリスト</title>
<script src="todo.js"></script>
</head>
<body>
<h1>ToDo</h1>
<p>
<input type="text" id="taskName" placeholder="タスク">
<input type="button" value="追加" onclick="addTask();"><br>
<input type="button" value="最初を削除" onclick="removeFirstTask();">
<input type="button" value="最後を削除" onclick="removeLastTask();">
</p>
<ul id="taskList"></ul>
</body>
</html>
var tasks = [];
// タスクを追加
function addTask() {
var taskName = document.getElementById("taskName").value;
tasks.push(taskName);
updateTasks();
}
// 最初のタスクを削除
function removeFirstTask() {
tasks.shift();
updateTasks();
}
// 最後のタスクを削除
function removeLastTask() {
tasks.pop();
updateTasks();
}
// 配列の中身を見てタスクリストを更新
function updateTasks() {
document.getElementById("taskList").innerHTML = "";
for (var i = 0; i < tasks.length; i++) {
document.getElementById("taskList").innerHTML += "<li>" + tasks[i] + "</li>";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment