Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

todoリスト作成時に

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

という状態になり、大分悩まされましたので、ここに記述します。
「オブジェクトを使うと情報が保持される」、ということを書きたいので、コード短縮の為に細かい機能は端折ってあります。ご了承下さい。
こんな感じの、作業中/完了の切り替えボタンが付いているものです。
スクリーンショット 2019-06-07 1.29.42.png

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);
    })
};

このコードでは、新規タスクを追加する度にオブジェクトを生成しており、そのオブジェクトを配列に追加しています。
作業中ボタンはオブジェクトに格納されているキーと値を参照している為、新規タスクを追加しても既存のタスクの情報が守られます。

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

kouki-iwahara
フロントエンドエンジニア JS,TS書いてます。 備忘録、アウトプットとして投稿します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away