【javascript】Todoリストの連番作成について

Javascriptで、Todoリストを作成しています。
Taskを追加した際に、自動で連番になるように実装したいのですが、
思った通りの動作ができません。色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

１.期待する動作
タスクの追加した際に、IDの番号が表示され、連番になる

２.　現在の状況
タスクの追加した際に、IDの番号が表示されない

※下記のソースコードは引用テキストを雛形として参考にしています。
https://qiita.com/takeshi_104/items/3138195ba0c58e37b1c3

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>
    
    <p class="radio">
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </p>
    
    <table>
      <thead>
        <tr>
        <th>ID</th>
        <th>コメント</th>
        <th>状態</th>
      </tr>
      </thead>
      <tbody id="list">
      <tr>
        <td></td>
      </tr>
      </tbody>
    </table>

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

    <script src="main.js"></script>
</body>
</html>

main.js

'use strict';
{
//値を読み取る
const newtask = document.getElementById('newtask');

// 入力された値をリストに追加する
const add = document.getElementById('add');
add.addEventListener('click',() => {

if(newtask.value !=='') {
// TODOリストに表示する
const list = document.getElementById('list');  

// div要素を作成
const wrapper = document.createElement('div');
wrapper.className = 'wrap';
const divone = document.createElement('div');
const divtwo = document.createElement('div');

// 作成した要素に追加 ①
list.appendChild(wrapper);
wrapper.appendChild(divone);
wrapper.appendChild(divtwo);

// p.button要素の作成 ②
const p = document.createElement('p');
p.className = 'divonep';

const btnone = document.createElement('button');
btnone.innerHTML = '削除';
btnone.className = 'btnone';
const btntwo = document.createElement('button');
btntwo.innerHTML = '作業中';
btntwo.className = 'btntwo';

// ②を①に追加
wrapper.insertBefore(p, divone);
wrapper.insertBefore(btnone, divtwo);
wrapper.insertBefore(btntwo, btnone);

// inputで読み取った値を表示
p.innerHTML = newtask.value;


}    
});
}

hope_mucci

2021/07/22 17:20

まず参考URLに記載されているTodoアプリと同じものを実装できますか？独自の機能を付け加えるのであれば最低限参照元のアプリが自力で作成できるようになってからです。

edu

2021/07/24 01:57

hope_mucciさん、アドバイスありがとうございます！プロゲートやドットインストール、Udemyを何度も繰り返し、テキストの言った事をなぞるばかりのinput学習をしてたので、アウトプット中心へ学習方法を切り替えて課題を解いて違う方法で、向上できればと思い、質問させて頂きました。

edu

2021/07/24 06:00

hope_mucciさん、ID連番をタスクの前に表示させたい場合、どのように表記したら良いですか？

行動規範の内容に同意します

回答1件

ベストアンサー

タスクの追加した際に、IDの番号が表示されないのは、IDを振っていないのと、IDを表示していないからです
3行ぐらい追加してみました

javascript
1      'use strict';
2      {
3        //値を読み取る
4        const newtask = document.getElementById('newtask');
5
6        // 入力された値をリストに追加する
7        const add = document.getElementById('add');
8        
9        // 連番用idを用意
10        let id = 0
11        add.addEventListener('click',() => {
12
13          if(newtask.value !=='') {
14            // TODOリストに表示する
15            const list = document.getElementById('list');  
16
17            // div要素を作成
18            const wrapper = document.createElement('div');
19            wrapper.className = 'wrap';
20            const divone = document.createElement('div');
21            const divtwo = document.createElement('div');
22
23            // 作成した要素に追加 ①
24            list.appendChild(wrapper);
25            wrapper.appendChild(divone);
26            wrapper.appendChild(divtwo);
27
28            // p.button要素の作成 ②
29            const p = document.createElement('p');
30            p.className = 'divonep';
31
32            const btnone = document.createElement('button');
33            btnone.innerHTML = '削除';
34            btnone.className = 'btnone';
35            const btntwo = document.createElement('button');
36            btntwo.innerHTML = '作業中';
37            btntwo.className = 'btntwo';
38
39            // ②を①に追加
40            wrapper.insertBefore(p, divone);
41            wrapper.insertBefore(btnone, divtwo);
42            wrapper.insertBefore(btntwo, btnone);
43
44            // inputで読み取った値を表示
45            p.innerHTML = newtask.value;
46            // idを表示
47            p.innerHTML += `<br>id: ${++id}`
48          }    
49        });
50      }