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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3168閲覧

IDが連番になるように振り分ける

hoshinokawa

総合スコア5

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/11 18:19

編集2019/09/12 14:58
前提・実現したいこと

「削除ボタンをクリックした際に、連番になるように番号(ID)を振り直したい。」

初心者、且つ初質問になります。
ToDoリストを作っています。
内容はサンプルをコピペしたもので、自作の部分はほぼありません。
「削除ボタン押下→タスクの追加」、に伴うIDの振り分けが上手くいきません。

現在エラーは出ておらず、解決の糸口に繋がるアイデイアが中々生まれずに立ち往生しております。
ヒントやググり方など関節的なモノでも構いません、宜しくお願い致します!

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

例)
①タスクを追加していく(IDが1,2,3,4…と連番になる)
②2を削除
③IDが134 と表示される 
④③にタスクを追加していく(IDが1,3,4、5…)
⑤削除と追加を繰り返していくと(4,5,6,7,7…)という風に連番にならず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'); // フォームの中身=contentsをチェック if (taskForm.value !== ''){ taskStr = taskForm.value; taskForm.value = ''; taskId +=1; // タスク部分のDOM作成 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'); // フォームの中身=contentsをチェック if (taskForm.value !== ''){ taskStr = taskForm.value; taskForm.value = ''; taskId +=1; // タスク部分のDOM作成 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()); } });

✅回答者の方々、時間を割いて頂きまして有難うございました。

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

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

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

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

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

gouf

2019/09/12 02:22

参考にされたコードはどの情報からですか? URL は追記可能ですか
sousuke

2019/09/12 06:15

質問者さんがどうしたい、こうあるべきだと思っている形を追記されるべきかと。 タスクを追加してIDが1,2,3,4とあるときに2を消すと ・そもそも1,3,4となるべきなのか ・1,2,3ではないのか 仮に1,3,4となった場合次に追加するIDは ・5なのか ・4なのか 仕組み的なものがないと回答もコードになりません。
hoshinokawa

2019/09/12 11:41

つい先程、解決済みとなりました。 ご指摘頂いた点は次回以降、投稿の際に参考にさせていただきます! お時間を割いて頂き有難うございました。
guest

回答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').textContenttr.getElementsByTagName('td')[0].textContentにしたと。

1,2,3の1を消したら、1,2になる感じ(2,3じゃなく)。多分これが意図通りだと思うけど・・・

投稿2019/09/12 04:19

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

hoshinokawa

2019/09/12 04:44

ご回答頂きありがとうございます。 バグってるんですか!? かなり参考になりそうで助かります! 直ぐにでも試してみたい所なのですが、後ほど経過報告させていただきます。
hoshinokawa

2019/09/12 11:33

先程確認いたしました。 まさに意図した通りの挙動になりました! 初めてteratailを利用したのですが、ドンピシャな回答を頂いて感激です。 また機会が御座いましたら何卒宜しくお願い致します。
退会済みユーザー

退会済みユーザー

2019/09/13 00:18

よかったです。俺は暇なときしか見てないけど、きっと誰かが助けてくれたりくれなかったりするさ!
guest

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

yambejp

総合スコア114572

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

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

hoshinokawa

2019/09/12 03:55

ご回答頂きまして、ありがとうございます。 参考ににさせて頂きます!
yambejp

2019/09/12 04:25 編集

リスクについて 単純に当該するタグが他の箇所にある可能性が否定できないからです クラスなどを利用するのが賢明です
hoshinokawa

2019/09/12 04:51

成る程、正しくおっしゃる通りですね! 完全に腑に落ちました。 有難うございます。
guest

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

kei344

総合スコア69364

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

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

hoshinokawa

2019/09/12 04:02

迅速にご回答頂きまして、ありがとうございます。 参考にさせて頂きます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問