--- title: オブジェクトを生成し情報を保持する tags: JavaScript HTML5 author: kouki-iwahara slide: false --- #オブジェクトの生成と情報の保持 todoリスト作成時に **新規タスクを追加すると情報が上書きされてしまう** という状態になり、大分悩まされましたので、ここに記述します。 「オブジェクトを使うと情報が保持される」、ということを書きたいので、コード短縮の為に細かい機能は端折ってあります。ご了承下さい。 こんな感じの、作業中/完了の切り替えボタンが付いているものです。 スクリーンショット 2019-06-07 1.29.42.png ##HTML まずHTMLから。ここは問題ありません。 ```html Todo List

ToDo List

コメント 状態

新規タスクの追加

``` ##情報が上書きされてしまう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); }) }; ``` このコードでは、新規タスクを追加する度にオブジェクトを生成しており、そのオブジェクトを配列に追加しています。 作業中ボタンはオブジェクトに格納されているキーと値を参照している為、新規タスクを追加しても既存のタスクの情報が守られます。 以上です。 わかりやすく説明する為に余計なコードは極力省いたつもりですが、見辛さはご勘弁下さい。 補足や訂正などありましたら、ぜひご教授いただければ嬉しいです。 最後まで見ていただきありがとうございます。