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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1302閲覧

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

Nobu_Nobuta

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/09/05 02:27

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

イメージ説明

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

html

1<body> 2 <h1>Todoリスト</h1> 3 4 <div> 5 <input type="radio" name="swich-display" id="radioAll" checked="checked">全て 6 <input type="radio" name="swich-display" id="radioDoing">作業中 7 <input type="radio" name="swich-display" id="radioComplete">完了 8 </div> 9 10 <table> 11 <thead> 12 <tr> 13 <th>ID</th> 14 <th>コメント</th> 15 <th>状態</th> 16 <th></th> 17 </tr> 18 </thead> 19 <tbody id="todoList"> 20 </tbody> 21 </table> 22 23 <h2>新規タスクの追加</h2> 24 <input type="text" id="inputContent"> 25 <button id="addButton">追加</button> 26 27 <script src="kadai2.js"></script> 28</body>

JavaScript

1 //***** Dom開始 ***** 2 window.addEventListener('DOMContentLoaded', () => { 3 4 //1.<iuput>タグを取得する 5 const inputContent = document.getElementById('inputContent'); 6 7 //2.<tbody>タグを取得する 8 const todoList = document.getElementById('todoList'); 9 10 const todos = []; 11 12 //追加ボタンの要素を取得 13 const addButton = document.getElementById('addButton'); 14 15 16 //***** 追加ボタンイベントを押す ***** 17 addButton.addEventListener('click', () => { 18 19 const id = todos.length; 20 const comment = inputContent.value; 21 let switchBtn = '作業中'; 22 const dlt = '削除'; 23 24 let task = { 25 id, 26 comment, 27 switchBtn, 28 dlt 29 }; 30 31 todos.push(task); 32 33 console.log(todos); 34 35 36 //▲▲▲▲ tr エレメントを新規作成(ただ生成するだけ) ▲▲▲▲ 37 let tr = document.createElement('tr'); 38 tr.classList.add('addTr'); 39 40 //---- td idエレメントを新規作成 ---- 41 let td = document.createElement('td'); 42 //tdの中に入れたいモノをセット 43 td.textContent = id; 44 45 //生成したtdをtrにセット 46 tr.appendChild(td); 47 //---- td idエレメント終わり ---- 48 49 50 //---- td inputした内容を新規作成 ---- 51 td = document.createElement('td'); 52 //tdの中に入れたいモノをセット 53 if (comment == '') { 54 return false; 55 } else { 56 td.textContent = comment; 57 } 58 //生成したtdをtrにセット 59 tr.appendChild(td); 60 //---- td 入力した内容終わり ---- 61 62 63 //---- td 作業中ボタンを新規作成 ---- 64 td = document.createElement('td'); 65 td.classList.add('state'); 66 67 //ボタンをセット 68 const btn = document.createElement('button'); 69 btn.textContent = (switchBtn); 70 td.appendChild(btn); 71 tr.appendChild(td); 72 //---- td 作業中ボタン終わり ---- 73 74 75 //●●●● 作業中イベントボタン ●●●● 76 btn.addEventListener('click', (e) => { 77 78 switch (switchBtn) { 79 case '作業中': 80 switchBtn = '完了'; 81 btn.textContent = (switchBtn); 82 if (task.switchBtn === '作業中') { 83 task.switchBtn = '完了' 84 } 85 console.log(todos); 86 break; 87 case '完了': 88 switchBtn = '作業中'; 89 btn.textContent = (switchBtn); 90 if (task.switchBtn === '完了') { 91 task.switchBtn = '作業中' 92 } 93 console.log(todos); 94 break; 95 } 96 }); 97 //●●●● 作業中イベントボタン終わり ●●●● 98 99 100 //---- td 削除を新規作成 ---- 101 td = document.createElement('td'); 102 const removeBtn = document.createElement('button'); 103 removeBtn.textContent = (dlt); 104 td.appendChild(removeBtn); 105 tr.appendChild(td); 106 //---- td 削除ボタン終わり ---- 107 108 todoList.appendChild(tr); 109 //▲▲▲▲ エレメントをtbody内に追加 ▲▲▲▲ 110 111 112 //●●●● 削除イベントボタン ●●●● 113 removeBtn.addEventListener('click', (e) => { 114 const idx = Array.from(document.querySelectorAll('.remove button')).indexOf(e.target); 115 console.log(idx); 116 todos.splice(idx, 1); 117 const element1 = e.target.closest('tr'); 118 element1.parentNode.removeChild(element1); 119 console.log(todos); 120 }); 121 //●●●● 削除イベントボタン終わり ●●●● 122 123 124 125 // ラジオボタンの要素を取得 126 const radioAll = document.getElementById('radioAll'); 127 const radioDoing = document.getElementById('radioDoing'); 128 const radioComplete = document.getElementById('radioComplete'); 129 //***** ラジオボタンを押した時の関数を作る ***** 130 131 radioAll.addEventListener('change', () => { //全て 132 }); 133 134 radioDoing.addEventListener('change', () => { //作業中 135 const progress = todos.filter(x => x.switchBtn === '作業中'); 136 console.log(progress); 137 }); 138 139 radioComplete.addEventListener('change', () => { //完了 140 const complete = todos.filter(x => x.switchBtn === '完了'); 141 console.log(complete); 142 }); 143 //***** ラジオボタン終わり ***** 144 145 146 147 148 }); 149 // ***** 追加ボタン終わり ***** 150 151 152 153 154 155 //***** Dom終わり ***** 156 });

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/09/05 02:30

課題ならその課題を出したかた(先生とか講師でしょうか)に聞きましょう というのがteratailでは指摘としてつきやすいです。 https://teratail.com/help/question-tips#questionTips1-1 >作業依頼のような投稿をして、課題や仕事を無償でやってもらえる場ではありません。 https://teratail.com/help/avoid-asking >何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問
m.ts10806

2019/09/05 02:32

ということで、明確な指示も出ているのであれば質問するより調べながらでも自身でやってみたほうが良いと思います。
Nobu_Nobuta

2019/09/05 02:51

ご指摘ありがとうございます。 自分でも1週間くらいかけて調べ、どうしても分からず、progate,ドットインストール をもう1回やり直して、再トライしたものの、全く検討がつかない状況でしたので、ヒントだけでも頂きたく、投稿させてもらいました。 大変失礼致しました。
m.ts10806

2019/09/05 02:58

デバッグの仕方は分かっているようですし、indexは取れているわけですから、あとはオブジェクトにpushしていけばいいだけのようにも思います(全部見たわけではないですが)
Lhankor_Mhy

2019/09/05 03:06

前回の質問 https://teratail.com/questions/209759 でも話が出ましたが、削除したあとのインデックスの取り方によってコードが変わってくるのではないかと思いましたので、講師の方と仕様を詰めた方がいいと思います。
Nobu_Nobuta

2019/09/05 03:13 編集

m.ts10806様、ヒントを頂きありがとうございます。 再度、頑張ってみます。 Lhankor_Mhy様 ご指摘ありがとうございます。 そのように致します。 お目汚し、大変失礼しました。
m.ts10806

2019/09/05 03:30

index使うよりかdata属性使ったほうが楽かもしれませんけど 課題なら制限ありそうだから本当に言われた通りロジック考えるしかなさそうですね。
Nobu_Nobuta

2019/09/05 03:40

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

2019/09/05 03:42

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

2019/09/05 03:42

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

回答1

0

自己解決

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

投稿2019/09/05 02:46

Nobu_Nobuta

総合スコア28

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/09/05 02:57

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

2019/09/05 03:02

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

2019/09/05 03:23

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

2019/09/05 03:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問