オブジェクトを生成し情報を保持する

#オブジェクトの生成と情報の保持

todoリスト作成時に

**新規タスクを追加すると情報が上書きされてしまう**

という状態になり、大分悩まされましたので、ここに記述します。
「オブジェクトを使うと情報が保持される」、ということを書きたいので、コード短縮の為に細かい機能は端折ってあります。ご了承下さい。
こんな感じの、作業中/完了の切り替えボタンが付いているものです。
<img width="211" alt="スクリーンショット 2019-06-07 1.29.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429297/55b753b7-fc0f-0163-476d-86e18f461750.png">
##HTML
まず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コード
```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コード
```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);
    })
};
```
このコードでは、新規タスクを追加する度にオブジェクトを生成しており、そのオブジェクトを配列に追加しています。
作業中ボタンはオブジェクトに格納されているキーと値を参照している為、新規タスクを追加しても既存のタスクの情報が守られます。

以上です。
わかりやすく説明する為に余計なコードは極力省いたつもりですが、見辛さはご勘弁下さい。
補足や訂正などありましたら、ぜひご教授いただければ嬉しいです。
最後まで見ていただきありがとうございます。