質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

画面が初期化されないようにしたい。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 397

score 8

前提・実現したいこと

①作業中、完了のラジオボタンを選択中に新しいTaskを追加する時、画面が初期化されないようにしたい。

現在、抱えている問題は作業中、完了のラジオボタンを選択している時にTaskの追加をすると
画面が初期化され全てのTaskが表示されてしまう。(Task追加後に作業中のラジオボタンをクリックすると作業中のTaskのみが表示されるようになります)

イメージ説明

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='style.css'>
    <title>TodoList</title>
</head>

<body>
    <h1>ToDoリスト</h1>
    <form>
        <input type="radio" name="state" id="allTodo" checked>
        <label for="allTodo">すべて</label>
        <input type="radio" name="state" id="workingTodo">
        <label for="workingTodo">作業中</label>
        <input type="radio" name="state" id="doneTodo">
        <label for="doneTodo">完了</label>
    </form>

    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>コメント</th>
                    <th>状態</th>
                </tr>
            </thead>
            <tbody id="todoList">

            </tbody>
        </table>

    </div>

    <h2>新規タスクの追加</h2>
    <form>
        <input type="text" id="todoInput" value="">
        <button type="submit" value="追加" id="addTaskButton">追加</button>
    </form>
    <script src="main.js"></script>
</body>

</html>
.hide {
    display: none;
}
const allTodo = document.getElementById('allTodo')
const workingTodo = document.getElementById('workingTodo')
const doneTodo = document.getElementById('doneTodo')
const todoList = document.getElementById('todoList');
const addTaskButton = document.getElementById('addTaskButton');
const textBox = document.getElementById('todoInput');

const todos = [];
let taskId = 0;


addTaskButton.addEventListener('click', (e) => {
    e.preventDefault();
    const todoInput = { task: textBox.value, state: '作業中' };
    todoInput.id = taskId;
    textBox.value = '';
    if (todoInput.task.match(/\S/g)) {
        //空白以外の文字に一致したら配列に追加
        todos.push(todoInput);
        textBox.focus();
        taskId++;
    }
    addTask();
});


//配列に格納されたToDoをHTMLに表示させる為の関数
const addTask = () => {
    while (todoList.firstChild) {
        todoList.removeChild(todoList.firstChild);
    }

    todos.forEach((todo, id) => {
        const tr = document.createElement('tr');
        tr.setAttribute('data-id', todo.id)
        todoList.appendChild(tr);

        const idTd = document.createElement('td');
        const comment = document.createElement('td');
        const stateTd = document.createElement('td');
        const deleteTd = document.createElement('td');

        tr.appendChild(idTd);
        tr.appendChild(comment);
        tr.appendChild(stateTd);
        tr.appendChild(deleteTd);

        idTd.textContent = id;
        comment.textContent = todo.task;

        stateTd.appendChild(createStateButton(id));
        deleteTd.appendChild(createDeleteButton(id));
    });
};


//状態を管理する為のボタンを作成する関数
const createStateButton = (id) => {
    const workingBtn = document.createElement('button');
    workingBtn.textContent = todos[id].state;
    workingBtn.classList.add('state');
    workingBtn.addEventListener('click', () => {
        if (todos[id].state === '作業中') {
            todos[id].state = '完了';
        } else {
            todos[id].state = '作業中';
        }
        addTask();
    });
    return workingBtn;
};


//ToDoを削除するボタンを作る為の関数
const createDeleteButton = (id) => {
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '削除';
    deleteBtn.addEventListener('click', () => {
        if (id > -1) {
            todos.splice(id, 1);
        }
        addTask();
    });
    return deleteBtn;
};


//作業中のラジオボタン押すと完了済みのTASKを隠す関数
workingTodo.addEventListener('click', () => {
    const tr = document.querySelectorAll('tr[data-id]');
    tr.forEach((todo) => {
        const stateBtn = (todo.querySelector('.state'));
        if (stateBtn.textContent === '完了') {
            todo.classList.add('hide');
        } else {
            todo.classList.remove('hide');
        }
    });
});

//完了のラジオボタンを押すと作業中のTASKを隠す関数
doneTodo.addEventListener('click', () => {
    const tr = document.querySelectorAll('tr[data-id]');
    tr.forEach((todo) => {
        const stateBtn = (todo.querySelector('.state'));
        if (stateBtn.textContent === '作業中') {
            todo.classList.add('hide');
        } else {
            todo.classList.remove('hide');
        }
    });
});

//すべてのラジオボタンを押すと全てのTASKが表示される関数
allTodo.addEventListener('click', () => {
    const tr = document.querySelectorAll('tr[data-id]');
    tr.forEach((todo) => {
        todo.classList.remove('hide');
    });
});

考えていること

if文で条件分岐をして試みたのですが、なかなか思うように行きません。
ご教授いただければ幸いです🙇‍♂️

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • yambejp

    2020/12/07 09:26

    ラジオボタンの機能説明がないのでなにをしたいかわかりません
    いまはまったく機能していないですよね?

    キャンセル

  • F_Yohei

    2020/12/07 11:44

    説明が足らず大変申し訳ございません。

    CSSファイルを記載していなかった為わかりづらかったかと思います。

    各ラジオボタンを押した時にtr要素にクラス名hideが付き、display:none;になるようにコードを書いています。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る