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

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

ただいまの
回答率

89.55%

JavaScriptでのindex番号取得とフィルタリングについて

解決済

回答 1

投稿

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

Nobu_Nobuta

score 18

Javascriptでtodoリスト作成の課題があり取り組んでおります。
タスクの追加ボタンを押すとID, 作業内容、進捗状況、削除ボタンが出るようにしております。
進捗状況の「作業中」ボタンは、押すと「完了」に表示が変わるようにしております。

イメージ説明

2点、どうしても分からない事があります。

<body>
  <h1>Todoリスト</h1>

  <div>
    <input type="radio" name="swich-display" id="radioAll" checked="checked">全て
    <input type="radio" name="swich-display" id="radioDoing">作業中
    <input type="radio" name="swich-display" id="radioComplete">完了
  </div>

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

  <h2>新規タスクの追加</h2>
  <input type="text" id="inputContent">
  <button id="addButton">追加</button>

  <script src="kadai2.js"></script>
</body>
  //***** Dom開始 *****
  window.addEventListener('DOMContentLoaded', () => {

    //1.<iuput>タグを取得する
    const inputContent = document.getElementById('inputContent');

    //2.<tbody>タグを取得する
    const todoList = document.getElementById('todoList');

    const todos = [];

    //追加ボタンの要素を取得
    const addButton = document.getElementById('addButton');


    //***** 追加ボタンイベントを押す *****
    addButton.addEventListener('click', () => {

      const id = todos.length;
      const comment = inputContent.value;
      let switchBtn = '作業中';
      const dlt = '削除';

      let task = {
        id,
        comment,
        switchBtn,
        dlt
      };

      todos.push(task);

      console.log(todos);


      //▲▲▲▲ tr エレメントを新規作成(ただ生成するだけ) ▲▲▲▲
      let tr = document.createElement('tr');
      tr.classList.add('addTr');

      //---- td idエレメントを新規作成 ----
      let td = document.createElement('td');
      //tdの中に入れたいモノをセット
      td.textContent = id;

      //生成したtdをtrにセット
      tr.appendChild(td);
      //---- td idエレメント終わり ----


      //---- td inputした内容を新規作成 ----
      td = document.createElement('td');
      //tdの中に入れたいモノをセット
      if (comment == '') {
        return false;
      } else {
        td.textContent = comment;
      }
      //生成したtdをtrにセット
      tr.appendChild(td);
      //---- td 入力した内容終わり ----


      //---- td 作業中ボタンを新規作成 ----
      td = document.createElement('td');
      td.classList.add('state');

      //ボタンをセット
      const btn = document.createElement('button');
      btn.textContent = (switchBtn);
      td.appendChild(btn);
      tr.appendChild(td);
      //---- td 作業中ボタン終わり ----


      //●●●● 作業中イベントボタン ●●●●
      btn.addEventListener('click', (e) => {

        switch (switchBtn) {
          case '作業中':
            switchBtn = '完了';
            btn.textContent = (switchBtn);
              if (task.switchBtn === '作業中') {
                task.switchBtn = '完了'
              }
            console.log(todos);
            break;
          case '完了':
            switchBtn = '作業中';
            btn.textContent = (switchBtn);
            if (task.switchBtn === '完了') {
              task.switchBtn = '作業中'
            }
            console.log(todos);
            break;
        }
      });
      //●●●● 作業中イベントボタン終わり ●●●●


      //---- td 削除を新規作成 ----
      td = document.createElement('td');
      const removeBtn = document.createElement('button');
      removeBtn.textContent = (dlt);
      td.appendChild(removeBtn);
      tr.appendChild(td);
      //---- td 削除ボタン終わり ----

      todoList.appendChild(tr);
      //▲▲▲▲ エレメントをtbody内に追加 ▲▲▲▲


      //●●●● 削除イベントボタン ●●●●
      removeBtn.addEventListener('click', (e) => {
        const idx = Array.from(document.querySelectorAll('.remove button')).indexOf(e.target);
        console.log(idx);
        todos.splice(idx, 1);
        const element1 = e.target.closest('tr');
        element1.parentNode.removeChild(element1);
        console.log(todos);
      });
      //●●●● 削除イベントボタン終わり ●●●●



      // ラジオボタンの要素を取得
      const radioAll = document.getElementById('radioAll');
      const radioDoing = document.getElementById('radioDoing');
      const radioComplete = document.getElementById('radioComplete');
      //***** ラジオボタンを押した時の関数を作る *****

      radioAll.addEventListener('change', () => { //全て
      });

      radioDoing.addEventListener('change', () => { //作業中
        const progress = todos.filter(x => x.switchBtn === '作業中');
        console.log(progress);
      });

      radioComplete.addEventListener('change', () => { //完了
        const complete = todos.filter(x => x.switchBtn === '完了');
        console.log(complete);
      });
      //***** ラジオボタン終わり *****




    });
    // ***** 追加ボタン終わり *****





    //***** Dom終わり *****
  });

【1】
ID番号の取得について、todos.lengthで取得しておりましたが、課題者曰く、これでは不可で、
forEachを使って取得するよう指示が出ております。
todos.forEach((index, value) => {
console.log(index);
});
で、検証してみたものの、このインデックス値をどのようにして、オブジェクトリテラルの中に代入すれば良いかが分かりません。

【2】
ラジオボタンで作業中、完了を押すと、ソートが出来るようになるようにしたいのですが、
課題者曰く、forEachを使用して、HTMLに表示させる処理を追加するようにとの事です。

【1】、【2】共に、どのようにすれば良いか想像がつかず、大変お手数ですが、アドバイスを頂けると嬉しいです。

どうぞ宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Nobu_Nobuta

    2019/09/05 12:40

    とりあえず、
    const id = todos.forEach((index, value) => {
    todos.push(index);
    });
    でやってみたのですが、HTML上にid番号は振られないし(console上、undefined)、1回目[{...}]、2回目[{...}, {...}, {...}]、3回目[{...}, {...}, {...},{...}, {...}, {...}, {...}]と記載されてしまいます。
    もしかしたら、そもそもの全体コードの作成方法がforEachに適合出来ていないのではないかと、疑心暗鬼のような感じに陥っております。

    キャンセル

  • m.ts10806

    2019/09/05 12:42

    回答か質問本文に追記していくと良いと思います。
    それも備忘録になります。

    キャンセル

  • m.ts10806

    2019/09/05 12:42

    ※それにtodosはあくまで単なる変数ですしHTMLにはなんら影響を及ぼしません

    キャンセル

回答 1

check解決した方法

-1

ご指摘ありがとうございます。
自分で、もう少し頑張ってみたいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/05 11:57

    こういう締め方はよろしくないので、その頑張った結果を記してきちんと解決としたほうが良いかと思います。

    キャンセル

  • 2019/09/05 12:02

    ご指摘ありがとうございます。
    何はともあれ、一旦締めなければいけないと思ったので、このような締め方をしたのですが、
    解決するまで締める必要はなかったという事でしょうか?

    キャンセル

  • 2019/09/05 12:23

    はい。ステータスは「解決済み」になりますから、同じような問題を抱えた人が見たときにどう感じるかという点では、本当に解決するまでは締めるべきではないです。

    キャンセル

  • 2019/09/05 12:25

    ありがとうございます。
    勉強になりました。

    キャンセル

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

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