Javascript　Todoリスト　タスクの追加とインデックスの初期化

前提・実現したいこと

①Todoリストで、追加ボタンを押すとID(インデックス)、タスク、作業中、削除ボタンの４つがtdタグに順次追加されるようにしたい
②削除ボタンを押したらタスクが消えて、インデックスが初期化されているようにしたい

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

①タスクを追加すると、下に追加されていくのではなく、同じ場所でインデックス番号のみ変わっていく仕様になっている。addTaskとaddButtonのオブジェクトは分けて実装したいです。

②初期化のメドッドを用いているが動作しない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel ="stylesheet" href="css/style.css">
7  <title>Todoリスト</title>
8</head>
9<body>
10  <h1>Todoリスト</h1>
11  <p>
12    <input type="radio" name="status" value="1" checked="checked">全て
13    <input type="radio" name="status" value="2">作業中
14    <input type="radio" name="status" value="3">完了
15    </p>
16<p></p>
17    <table>
18      <thead>
19        <th>ID</th>
20        <th>コメント</th>
21        <th>状態</th>
22        <th></th>
23      </thead>
24      <tbody class ="addTask-target"></tbody>
25    </table>
26    <h2>新規タスクの追加</h2>
27    <input class="addTask-value" type="text" />
28    <button class="addTask-trigger" type="button">追加</button>
29  <script src="js/main.js"></script>
30</body>
31
32</script>
33</html>

Javascript
1    
2    {
3    document.addEventListener('DOMContentLoaded', function() {
4    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
5    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
6    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
7    let nextId = 0;
8    const todos = [];
9  
10    //テーブル要素を生成する　td要素を作る
11    const tableItem = document.createElement('tr');
12    const idSpanTd = document.createElement('td');
13    const taskSpanTd = document.createElement('td');
14    const createButtonTd = document.createElement('td');
15    const removeButtonTd = document.createElement('td');
16
17    const addTask = (task, id) => {    
18      //要素内のHTML文章を変更する
19      idSpanTd.innerText = id;
20      taskSpanTd.innerText = task;
21      //生成したテーブル要素をブラウザに表示する
22      tableItem.append(idSpanTd);
23      tableItem.append(taskSpanTd);
24      addTaskTarget.appendChild(tableItem);
25      return(task,id)
26    };
27    
28    //Button要素を生成する
29    const removeButton = document.createElement('button');
30    const createButton = document.createElement('button');
31
32    const addButton = (button) => {
33      //要素内のHTML文章を変更する
34      createButton.innerText = '作業中';
35      removeButton.innerText = '削除';
36      //生成したテーブル要素をブラウザに表示する
37      tableItem.append(createButtonTd);
38      tableItem.append(removeButtonTd);
39      addTaskTarget.appendChild(tableItem);
40       //生成したbutton要素を生成する
41       createButtonTd.append(createButton);
42       removeButtonTd.append(removeButton); 
43       return(button)
44      };
45  
46      //追加ボタンをクリックした際にタスクを追加する処理を行う
47    addTaskTrigger.addEventListener('click', () => {
48       const task = addTaskValue.value;
49       addTask(task, nextId++);
50       addButton();
51       addTaskValue.value = '';
52      });
53    
54    //チェックリスト用オブジェクト
55    const todo = {
56       task: 'taskSpanTd',
57       status: '作業中'
58      };
59    todos.push(todo);
60    
61    removeButton.addEventListener('click', delete_element, false);
62
63    // //削除ボタンを押した時にタスクを削除する
64    function delete_element () {
65      let tabletag = this.closest ('tr');
66      if (tabletag)
67      tabletag.remove ();
68    }  
69    });
70  }

試したこと

①addTaskとaddButtonにそれぞれ以下の記述が無いためクリックした際に下に追加されないのではないかと思い、以下の要素を関数にしてaddTaskとaddButtonの中に入れましたが、上手く機能せずでした。

  //テーブル要素を生成する　td要素を作る
    const tableItem = document.createElement('tr');
    const idSpanTd = document.createElement('td');
    const taskSpanTd = document.createElement('td');
    const createButtonTd = document.createElement('td');
    const removeButtonTd = document.createElement('td');

②以下の関数を使用していますが機能せずです。

  //  インデックスの初期化
    //   function initialize() {
    //   if(tr)
    //   tr.initialize();
    // };
    //   document.addEventListener("DOMContentLoaded", initialize.bind(this));

お手数ですがご確認宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

①タスクを追加すると、下に追加されていくのではなく、同じ場所でインデックス番号のみ変わっていく仕様になっている。
addTaskとaddButtonのオブジェクトは分けて実装したいです。

同じ場所でインデックス番号のみ変わっていく動作になっている原因は、追加ボタンをクリックした際にtableItemなどに新しく作成した要素が代入されていないからです。
「試したこと」書いているコードは、tableItemなどと名前は同じであるが新たな別の定数を作ってそこに新しく作成した要素を代入するという意味のコードになっています。
単なる代入が行いたい場合は、頭にconstのキーワードはつけてはいけません。
またconstで宣言したものは定数であり代入が行えないので、constではなくletで宣言を行って下さい。

ちなみに、仕様というのは望む動作のことです。意図に反している動作のことは仕様とは呼びません。

②初期化のメドッドを用いているが動作しない

メドッドという言葉はありません。メソッド(Method)です。

また「初期化」とは一体何がしたいのか分かりません。

「試したこと」にtr.initialize()というコードがありますが、trという変数は定義されていませんし、htmlの要素はinitializeというメソッドを持っていないので実行するとエラーになります。

それなりに動くコード：

javascript
1    {
2    document.addEventListener('DOMContentLoaded', function() {
3    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
4    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
5    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
6    let nextId = 0;
7    const todos = [];
8
9    let tableItem;
10    let idSpanTd;
11    let taskSpanTd;
12    let createButtonTd;
13    let removeButtonTd;
14
15    const addTask = (task, id) => {    
16      //要素内のHTML文章を変更する
17      idSpanTd.innerText = id;
18      taskSpanTd.innerText = task;
19      //生成したテーブル要素をブラウザに表示する
20      tableItem.append(idSpanTd);
21      tableItem.append(taskSpanTd);
22      addTaskTarget.appendChild(tableItem);
23      return(task,id)
24    };
25
26    let removeButton;
27    let createButton;
28
29    const addButton = (button) => {
30      //要素内のHTML文章を変更する
31      createButton.innerText = '作業中';
32      removeButton.innerText = '削除';
33      //生成したテーブル要素をブラウザに表示する
34      tableItem.append(createButtonTd);
35      tableItem.append(removeButtonTd);
36      addTaskTarget.appendChild(tableItem);
37       //生成したbutton要素を生成する
38       createButtonTd.append(createButton);
39       removeButtonTd.append(removeButton); 
40       return(button)
41      };
42
43      //追加ボタンをクリックした際にタスクを追加する処理を行う
44    addTaskTrigger.addEventListener('click', () => {
45       //テーブル要素を生成する　td要素を作る
46       //Button要素を生成する
47       tableItem = document.createElement('tr');
48       idSpanTd = document.createElement('td');
49       taskSpanTd = document.createElement('td');
50       createButtonTd = document.createElement('td');
51       removeButtonTd = document.createElement('td');
52       removeButton = document.createElement('button');
53       createButton = document.createElement('button');
54
55       const task = addTaskValue.value;
56       addTask(task, nextId++);
57       addButton();
58       addTaskValue.value = '';
59
60       removeButton.addEventListener('click', delete_element, false);
61
62      });
63
64    //チェックリスト用オブジェクト
65    const todo = {
66       task: 'taskSpanTd',
67       status: '作業中'
68      };
69    todos.push(todo);
70
71    // //削除ボタンを押した時にタスクを削除する
72    function delete_element () {
73      let tabletag = this.closest ('tr');
74      if (tabletag)
75      tabletag.remove ();
76    }  
77    });
78  }