オブジェクトの生成と情報の保持
todoリスト作成時に
新規タスクを追加すると情報が上書きされてしまう
という状態になり、大分悩まされましたので、ここに記述します。
「オブジェクトを使うと情報が保持される」、ということを書きたいので、コード短縮の為に細かい機能は端折ってあります。ご了承下さい。
こんな感じの、作業中/完了の切り替えボタンが付いているものです。
HTML
まずHTMLから。ここは問題ありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Todo List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ToDo List</h1>
<table>
<thead>
<tr>
<th>コメント</th>
<th>状態</th>
</tr>
</thead>
<tbody id="todo-list">
</tbody>
</table>
<h2>新規タスクの追加</h2>
<div>
<input id="input-todo" type="text">
<button id="add-btn">追加</button>
</div>
<script src="script.js"></script>
</body>
</html>
情報が上書きされてしまうjavascriptコード
const todos = [];
const todoList = document.getElementById('todo-list');
const addBtn = document.getElementById('add-btn');
// todoのコメント内容を取得し、配列todoに追加
addBtn.addEventListener('click', e => {
const inputTodo = document.getElementById('input-todo').value;
todos.push(inputTodo);
showTodo(); //HTMLにtodoコメントと作業中ボタンを表示させる関数
});
const showTodo = () => {
while (todoList.firstChild) {
todoList.textContent = '';
}
todos.map( todo => {
const tr = document.createElement('tr');
const tdComment = document.createElement('td');
const tdState = document.createElement('td');
tdComment.textContent = `${todo}`;
// 作業中ボタンの生成
const workBtn = document.createElement('button');
workBtn.textContent = '作業中';
workBtn.addEventListener('click', e => {
if(workBtn.textContent === '作業中') {
workBtn.textContent = '完了';
} else {
workBtn.textContent = '作業中';
}
})
todoList.appendChild(tr);
tr.appendChild(tdComment);
tr.appendChild(tdState);
tdState.appendChild(workBtn);
})
};
上書きされてしまう原因
新規タスクを追加する度にworkBtn.textContent = '作業中';のコードが働いてしまう為、既存のタスクが完了でも'作業中'になる。
解決したjavascriptコード
const todos = [];
const todoList = document.getElementById('todo-list');
const addBtn = document.getElementById('add-btn');
addBtn.addEventListener('click', e => {
const inputTodo = document.getElementById('input-todo').value;
// オブジェクト生成前に記述する
const workBtn = document.createElement('button');
workBtn.textContent = '作業中';
// todoのコメント内容と作業中ボタンのオブジェクト生成
const todo = new Object();
todo.value = inputTodo;
todo.state = workBtn;
workBtn.addEventListener('click', e => {
if(workBtn.textContent === '作業中') {
workBtn.textContent = '完了';
} else {
workBtn.textContent = '作業中';
}
})
// オブジェクトtodoを配列todosに追加
todos.push(todo);
showTodo();
});
const showTodo = () => {
while (todoList.firstChild) {
todoList.textContent = '';
}
todos.map( todo => {
const tr = document.createElement('tr');
const tdComment = document.createElement('td');
const tdState = document.createElement('td');
tdComment.textContent = todo.value;
const stateBtn = todo.state;
todoList.appendChild(tr);
tr.appendChild(tdComment);
tr.appendChild(tdState);
tdState.appendChild(stateBtn);
})
};
このコードでは、新規タスクを追加する度にオブジェクトを生成しており、そのオブジェクトを配列に追加しています。
作業中ボタンはオブジェクトに格納されているキーと値を参照している為、新規タスクを追加しても既存のタスクの情報が守られます。
以上です。
わかりやすく説明する為に余計なコードは極力省いたつもりですが、見辛さはご勘弁下さい。
補足や訂正などありましたら、ぜひご教授いただければ嬉しいです。
最後まで見ていただきありがとうございます。
