Q&A
参考にされたコードはどの情報からですか? URL は追記可能ですか
前提・実現したいこと
「削除ボタンをクリックした際に、連番になるように番号(ID)を振り直したい。」
初心者、且つ初質問になります。
ToDｏリストを作っています。
内容はサンプルをコピペしたもので、自作の部分はほぼありません。
「削除ボタン押下→タスクの追加」、に伴うIDの振り分けが上手くいきません。
現在エラーは出ておらず、解決の糸口に繋がるアイデイアが中々生まれずに立ち往生しております。
ヒントやググり方など関節的なモノでも構いません、宜しくお願い致します！
発生している問題・エラーメッセージ
例）
①タスクを追加していく（ＩＤが１，２，３，４…と連番になる）
②２を削除
③ＩＤが１３４ と表示される
④③にタスクを追加していく（ＩＤが１，３，４、５…）
⑤削除と追加を繰り返していくと（４，５，６，７，７…）という風に連番にならずIDも被る
該当のソースコード
// 削除ボタンを生成 const createDeleteButton = task => { const deleteButton = document.createElement('button'); deleteButton.textContent = '削除'; deleteButton.addEventListener('click', () => { task.remove(); updateId(); }); return deleteButton; } // 番号 再振り分け const updateId = () => { const taskList = document.getElementsByTagName('tr'); taskId = 0; Array.from(taskList, tr => { // if (taskId !== 0){ tr.getElementsByTagName('td').textContent = taskId; } taskId++ }); taskId--; }
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Javascript Kadai_2</title> <link rel="stylesheet" href="css/test_5.css"> </head> <body> <h1>ToDoリスト</h1> <input type="radio" name="status" id="all" value="all" checked="checked">すべて <input type="radio" name="status" id="working" value="working">作業中 <input type="radio" name="status" id="complete" value="complete">完了 <table id="table"> <tr> <thead> <th>ID</th> <th>コメント</th> <th>状態</th> </thead> </tr> <tbody id="tbody"></tbody> </table> <h2>新規タスクの追加</h2> <input id="task" type="text"> <button type="submit" id="submit">追加</button> <script src="js/main_3.js"></script> </body> </html>
css
.hide { display: none; }
JavaScript
ソースコード
// タスクの通し番号定義 0 を代入しないとNaN が表示される let taskId = 0;; // リストの表示を変える関数 const changeList = status => { const trAll = document.getElementsByTagName('tr'); Array.from(trAll, tr => { tr.classList.remove('hide'); }); if (status === 'working'){ const trComplete = document.getElementsByClassName('complete'); Array.from(trComplete, tr => { tr.classList.add('hide'); }); } else if (status === 'complete'){ const trWorking = document.getElementsByClassName('working'); Array.from(trWorking, tr => { tr.classList.add('hide'); }); } } // ラジオボタンをクリックした場合にstatusの中身を取得して表示を変える関数 const statusRadioButtons = document.getElementsByName('status'); Array.from(statusRadioButtons, statusRadioButton => { statusRadioButton.addEventListener('click', e => { const status = e.target.value; changeList(status); }); }); // チェックボタンの状態を取置 const getRadioButtonStatus = () => { const status = document.getElementsByName('status:checked').value; return status; } // 削除ボタンを生成 const createDeleteButton = task => { const deleteButton = document.createElement('button'); deleteButton.textContent = '削除'; deleteButton.addEventListener('click', () => { task.remove(); updateId(); }); return deleteButton; } // 番号 再振り分け const updateId = () => { const taskList = document.getElementsByTagName('tr'); taskId = 0; Array.from(taskList, tr => { // if (taskId !== 0){ tr.getElementsByTagName('td').textContent = taskId; } taskId++ }); taskId--; } // 状態ボタンを生成 const createStatusButton = task => { const statusButton = document.createElement('button'); statusButton.textContent = '作業中'; task.classList.add('working'); // ボタン押下時にタスクの状態を入れ替える statusButton.addEventListener('click', () => { task.classList.toggle('working'); task.classList.toggle('complete'); if (statusButton.textContent === '作業中'){ statusButton.textContent = '完了'; } else { statusButton.textContent = '作業中'; } }); return statusButton; } // タスクを追加する document.getElementById('submit').addEventListener('click', () => { // フォームからタスクの中身を含む用をを取得 const taskForm = document.getElementById('task'); // フォームの中身＝ｃｏｎｔｅｎtsをチェック if (taskForm.value !== ''){ taskStr = taskForm.value; taskForm.value = ''; taskId +=1; // タスク部分のＤＯＭ作成 const task = document.createElement('tr'); const taskIdArea = document.createElement('td'); const taskTextArea = document.createElement('td'); const buttonArea = document.createElement('td'); const deleteButton = createDeleteButton(task); const statusButton = createStatusButton(task); taskIdArea.textContent = taskId; taskTextArea.textContent = taskStr; buttonArea.appendChild(statusButton); buttonArea.appendChild(deleteButton); task.appendChild(taskIdArea); task.appendChild(taskTextArea); task.appendChild(buttonArea); document.getElementById('tbody').appendChild(task); changeList(getRadioButtonStatus()); } });
試したこと
以下の部分に追加
let sortNum = []; // 予め用意しておく。
/ タスクを追加する document.getElementById('submit').addEventListener('click', () => { // フォームからタスクの中身を含む用をを取得 const taskForm = document.getElementById('task'); // フォームの中身＝ｃｏｎｔｅｎtsをチェック if (taskForm.value !== ''){ taskStr = taskForm.value; taskForm.value = ''; taskId +=1; // タスク部分のＤＯＭ作成 const task = document.createElement('tr'); const taskIdArea = document.createElement('td'); const taskTextArea = document.createElement('td'); const buttonArea = document.createElement('td'); const deleteButton = createDeleteButton(task); const statusButton = createStatusButton(task); taskIdArea.textContent = taskId; ///////////////////////////////////////////// sortNum.push(taskId); // 追加のコード sortNum.sort(); ////////////////////////////////////////////// taskTextArea.textContent = taskStr; buttonArea.appendChild(statusButton); buttonArea.appendChild(deleteButton); task.appendChild(taskIdArea); task.appendChild(taskTextArea); task.appendChild(buttonArea); document.getElementById('tbody').appendChild(task); changeList(getRadioButtonStatus()); } });
✅回答者の方々、時間を割いて頂きまして有難うございました。
質問者さんがどうしたい、こうあるべきだと思っている形を追記されるべきかと。
タスクを追加してIDが１，２，３，４とあるときに２を消すと
・そもそも１，３，４となるべきなのか
・１，２，３ではないのか
仮に１，３，４となった場合次に追加するIDは
・５なのか
・４なのか
仕組み的なものがないと回答もコードになりません。
つい先程、解決済みとなりました。
ご指摘頂いた点は次回以降、投稿の際に参考にさせていただきます！
お時間を割いて頂き有難うございました。
回答3件
0
ベストアンサー
これシンプルにバグってるなぁ・・・しかもけっこーひどい設計かも・・・
全部リファクタはめんどいからしないけど、updateIdは以下がいいんじゃないかな。
// 番号 再振り分け const updateId = () => { const tbody = document.getElementById("tbody"); const taskList = tbody.getElementsByTagName('tr'); taskId = 0; Array.from(taskList, tr => { taskId++ tr.getElementsByTagName('td')[0].textContent = taskId; }); }
元のはdocumentからtrタグを全取得してたけど、明らかにいらんもんまでとってたんで、tbody配下の奴だけとると。
んでtaskIdをややこしいいじり方してたんでそこを直したのと、
tr.getElementsByTagName('td').textContentをtr.getElementsByTagName('td')[0].textContentにしたと。
1,2,3の1を消したら、1,2になる感じ(2,3じゃなく)。多分これが意図通りだと思うけど・・・
投稿2019/09/12 04:19
退会済みユーザー
総合スコア0
ご回答頂きありがとうございます。
バグってるんですか！？
かなり参考になりそうで助かります！
直ぐにでも試してみたい所なのですが、後ほど経過報告させていただきます。
先程確認いたしました。
まさに意図した通りの挙動になりました！
初めてteratailを利用したのですが、ドンピシャな回答を頂いて感激です。
また機会が御座いましたら何卒宜しくお願い致します。
よかったです。俺は暇なときしか見てないけど、きっと誰かが助けてくれたりくれなかったりするさ！
0
タグ名で連番を取るのはリスクが高いような気がしますが一応
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 var n=document.getElementsByTagName('div'); 4 n[2].parentNode.removeChild(n[2]); 5 alert('stop');//1,2,4,5が表示 6 [].forEach.call(n,(x,y)=>x.textContent=(y+1)); 7 //1,2,3,4が表示 8}); 9</script> 10<body> 11<div>1</div> 12<div>2</div> 13<div>3</div> 14<div>4</div> 15<div>5</div> 16</body>
投稿2019/09/12 00:36
総合スコア116661
ご回答頂きまして、ありがとうございます。
参考ににさせて頂きます！
「javascript タグ 連番 リスク」
で検索してみました。
ご回答頂いた内容は以下のサイトにある様な意味合いでしょうか？
https://www.google.com/amp/s/blog.ohgaki.net/javascript-injection-risky-functions-and-features/amp
リスクについて
単純に当該するタグが他の箇所にある可能性が否定できないからです
クラスなどを利用するのが賢明です
成る程、正しくおっしゃる通りですね！
完全に腑に落ちました。
有難うございます。
0
とりあえずここは違うと思います。
js
1// tr.getElementsByTagName('td').textContent = taskId; 2// ↓ 3 tr.getElementsByTagName('td')[ 0 ].textContent = taskId;
【Document.getElementsByTagName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
投稿2019/09/11 18:49
総合スコア69596
あなたの回答
tips
プレビュー
