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

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

ただいまの
回答率

88.57%

JavaScript 配列番号表示について

解決済

回答 1

投稿

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

akaru_00

score 2

前提・実現したいこと

javascriptでtodoリストを作っております。
項目追加ボタンを押すと項目の後ろに『作業中』か『完了』の状態を表す表すボタンがついており、切り替えることが出来ます。
『全体』『作業中』『完了』のラジオボタンが3つあって、その内の一つを押すとそれぞれの状態のリストが表示されます。
以下の例を見ていただきたいのですが、実装したいことは、全体のリストの配列番号をそのまま『作業中』『完了』に引き継ぎたいのに、配列番号が今現在のコードの場合絶対に0から始まってしまいます。

実装したいこと
【全部のリスト】0:あああ(作業) 1:いいい(完了) 2:ううう(作業)  3:えええ(完了)
【作業中のリスト】0:あああ 2:ううう
【完了のリスト】1:いいい 3:えええ
今現在の状態
【全部のリスト】0:あああ(作業) 1:いいい(完了) 2:ううう(作業)  3:えええ(完了)
【作業中のリスト】0:あああ 1:ううう
【完了のリスト】0:いいい 1:えええ

発生している問題・エラーメッセージ

エラーメッセージなし

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
</head>
<body>
    <h1>ToDoリスト</h1>
    <div id="todo-list">
        <input type="radio" name="select-item" id="all-select" checked>全て
        <input type="radio" name="select-item" id="doing-select">作業中
        <input type="radio" name="select-item" id="done-select">完了
        <h2>新規タスクの追加</h2>
        <input type="text" id="add-todo">
        <input type="button" id="add-btn" value="追加">
    </div>
    <table>
        <thead>
            <th>ID</th>
            <th> コメント </th>
            <th> 状態 </th>
            <th></th>
        </thead>
        <tbody  id="display">
        </tbody>
    </table>
    <script>
        'use strict';
        //配列定義
        const todoList = [];
        const btn = document.getElementById('add-btn');
        const todoListElement = document.getElementById('display');
        btn.addEventListener('click', () => {
            displayList();
        });
        //空の配列に入力値を入れていくfunction
        const displayList = () => {
            const todo = document.getElementById("add-todo").value;
            document.getElementById("add-todo").value = "";
            const todoItem = {task: todo, status: '作業中'};
            const tasks = todoList.task;
            if(todo){
                todoList.push(todoItem);
                displayResult(todoList);
            }
        };
        //表示function
        const displayResult = (filterdTodoList) => {
            while(todoListElement.firstChild){
                todoListElement.removeChild(todoListElement.firstChild);
            };
            filterdTodoList.forEach((todo, index) => {
                const trList = document.createElement('tr');
                //index番号の要素追加
                const tdIndex = document.createElement('td');
                tdIndex.textContent = index;
                //コメントの要素追加
                const tdValue = document.createElement('td');
                tdValue.textContent = todo.task;
                //作業中、削除ボタンの要素追加
                const checkButton = createCheckButton(todo);
                const removeButton = createRemoveButton(index);
                //表示
                trList.appendChild(tdIndex);
                trList.appendChild(tdValue);
                trList.appendChild(checkButton);
                trList.appendChild(removeButton);
                todoListElement.appendChild(trList);
            });
        };
        //作業中ボタンの生成function
        const createCheckButton = (todo) => {
            const tdBtn = document.createElement('td');
            const checkBtn = document.createElement('input');
            checkBtn.setAttribute('type', 'button');
            checkBtn.setAttribute('value', todo.status);
            checkBtn.addEventListener('click', () => {
                checkTodo(todo);
            });
            return checkBtn;
        };
        //削除ボタンの生成function
        const createRemoveButton = (index) => {
            const tdBtn = document.createElement('td');
            const removeBtn = document.createElement('input');
            removeBtn.setAttribute('type', 'button');
            removeBtn.setAttribute('value', '削除');
            removeBtn.addEventListener('click', () => {
                removeTodo(index);
            });
            return removeBtn;
        };
        //作業中を押す
        const checkTodo = (todo) =>{
            if(todo.status === "作業中"){
            todo.status = "完了";
            }else{
            todo.status = "作業中";
            };
            console.log(todo.status);
            displayResult(todoList);
        };
        //削除を押す
        const removeTodo = (index) =>{
            todoList.splice(index,1);
            displayResult(todoList);
        };
        //作業中リストアップ
        const doingRadio = document.getElementById('doing-select');
        doingRadio.addEventListener('click', () =>{
            const filterdTodoList = todoList.filter(todo => todo.status === "作業中");
            displayResult(filterdTodoList);
        });
    //完了リストアップ
        const doneRadio = document.getElementById('done-select');
        doneRadio.addEventListener('click', () =>{
            const filterdTodoList = todoList.filter(todo => todo.status === "完了");
            displayResult(filterdTodoList);
        });
    </script>
</body>
</html>

試したこと

『作業中』『完了』のリスト作成は全体のリストとは別に配列を作ってfilterで絞り込んで格納しているのでindexをfilterdTodoListに引き渡してreturnで[index,todo.status === "作業中"]を返せばいいのではないかと思った。
→リスト細分化されずどのラジオボタンを押しても全体のリストが表示された。

プログラミング初心者で初歩的な質問で申し訳ありませんがぜひご回答いただければ幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

ソースが長いのであんまり読んでませんが、気になったところだけ。

以下の例を見ていただきたいのですが、実装したいことは、全体のリストの配列番号をそのまま『作業中』『完了』に引き継ぎたいのに、配列番号が今現在のコードの場合絶対に0から始まってしまいます。 

配列のインデックスというのは0で始まるルールになってます。

元の配列から別の配列を作成した場合、元の配列のインデックスが1の要素が別の配列の先頭になったら、そのインデックスは0です。

根本的な問題は「配列のインデックス」を表示項目にしている点にあると思います。
格納しているオブジェクト自体に「表示用の番号」を持たせれば解決するんじゃないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/13 19:47

    ご回答ありがとうございます。
    表示用の番号を持たせておくのは目からうろこでした。さっそく実践してみます!

    キャンセル

  • 2020/05/13 20:16

    できました。天才です!ありがとうございました。

    キャンセル

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

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

関連した質問

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