idが取得できない。

前提・実現したいこと

簡単なtodolistを作成しています。
実現したいことは削除機能です。特定のidを持つものを削除したいです。

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

idが取得できずにエラーが出てしまいます。
「Uncaught TypeError: Cannot read property 'addEventListener' of null」
下記にソースコードを示します。どの部分がおかしいのでしょうか？

該当のソースコード

js
1const myfunc = document.getElementById('click-function');
2let count = 0;
3myfunc.addEventListener('click',function(){
4    let todoItems = [];
5    let todoItem = document.getElementById('item').value;
6    todoItems.push(todoItem);
7    todoItems.forEach((element,index,array) => {
8        const btn_1 = document.createElement('button');
9        const btn_2 = document.createElement('button');
10        btn_1.textContent = "作業中";
11        btn_2.textContent = "消去";
12        btn_2.type = "button";
13        btn_2.id = "delete";
14        const td_1 = document.createElement('td');
15        const td_2 = document.createElement('td');
16        const td_3 = document.createElement('td');
17        const td_4 = document.createElement('td');
18        const tr = document.createElement('tr');
19        tr.id = "tr-" + count;
20        td_1.appendChild(document.createTextNode(count));
21        td_2.appendChild(document.createTextNode(todoItem));
22        td_3.appendChild(btn_1);
23        td_4.appendChild(btn_2);
24        tr.appendChild(td_1);
25        tr.appendChild(td_2);
26        tr.appendChild(td_3);
27        tr.appendChild(td_4);
28        document.getElementById('list_item').appendChild(tr);
29        count++;
30    }) 
31});
32const click_del = document.getElementById('delete');
33click_del.addEventListener('click',function(){
34    const list_item = document.getElementById('list_item');
35    const tr_count = document.getElementById('tr-'+count);
36    if(tr_count.hasChildNodes()){
37        list_item.removeChild(tr);
38        count--;
39    }
40});
41
42
43

html
1<body>
2  <h1>todo list</h1>
3  <div>
4    <input type="text" id="item">
5    <button type="button" id='click-function'>Add</button>
6  </div>
7  
8  <table>
9      <thead>
10          <tr>
11            <th>ID</th><th>コメント</th><th>状態</th><th></th>
12          </tr>
13      </thead>
14      <tbody id="list_item">
15          
16      </tbody>
17  </table>
18  <script src="index.js"></script>
19</body>

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

回答1件

ベストアンサー

エラーが出ている箇所は、以下のようです。

JS
1const click_del = document.getElementById('delete');
2click_del.addEventListener('click',function(){

id="delete"を指定しているHTML要素が存在しないので、
存在しない要素に「addEventListener」はない、的なエラーがでてしまっています。

<button type="button" id="delete">Delete</button>などを追加すればとりあえずエラーはなくなると思います。

追記しました。こちらでいかがでしょうか?
CodePenで実装してみました

JS
1const myfunc = document.getElementById('click-function');
2let count = 0;
3myfunc.addEventListener('click',function(){
4    let todoItems = [];
5    let todoItem = document.getElementById('item').value;
6    todoItems.push(todoItem);
7    todoItems.forEach((element,index,array) => {
8        const btn_1 = document.createElement('button');
9        const btn_2 = document.createElement('button');
10        btn_1.textContent = '作業中';
11        btn_2.textContent = '消去';
12        btn_2.type = 'button';
13        btn_2.id = 'delete-' + count; /* idが重複しないようにする */
14        
15        
16        // 追加
17        btn_2.addEventListener('click',function(){
18            const list_item = document.getElementById('list_item');
19            const tr_count = document.getElementById('tr-'+count);
20            if(tr_count.hasChildNodes()){
21                list_item.removeChild(tr);
22                count--;
23            }
24        });
25        
26        
27        const td_1 = document.createElement('td');
28        const td_2 = document.createElement('td');
29        const td_3 = document.createElement('td');
30        const td_4 = document.createElement('td');
31        const tr = document.createElement('tr');
32        tr.id = "tr-" + count;
33        td_1.appendChild(document.createTextNode(count));
34        td_2.appendChild(document.createTextNode(todoItem));
35        td_3.appendChild(btn_1);
36        td_4.appendChild(btn_2);
37        tr.appendChild(td_1);
38        tr.appendChild(td_2);
39        tr.appendChild(td_3);
40        tr.appendChild(td_4);
41        document.getElementById('list_item').appendChild(tr);
42        count++;
43    }) 
44});
45

投稿2020/04/19 05:28

編集2020/04/19 07:25

new1ro

総合スコア4528

退会済みユーザー

2020/04/19 05:33

jsファイルに const btn_2 = document.createElement('button'); btn_2.type = "button"; btn_2.id = "delete"; を記述しているのですがこちらでは指摘していただいたタグは生成されていないのでしょうか？

new1ro

2020/04/19 06:42 編集

そのタイミングで、タグは生成されます。逆にいうと、クリックするまでは<button id="delete">は存在しません。 const click_del = document.getElementById('delete'); 以下の記述を、 const btn_2 = document.createElement('button'); btn_2.type = "button"; btn_2.id = "delete"; のあとに追記すると該当のエラーはなくなるのでは、と思います。

退会済みユーザー

2020/04/19 07:04

記述していただいた通りに変更したらエラーの内容は変わったのですが、別のエラーが解決できなくなってしまいました。 click_del.addEventListener('click',function(){...;以下の記述を tr.appendChild(td_4); document.getElementById('list_item').appendChild(tr); の後に書きました。そしたらまた同じエラーがでてしまいました。この段階ではhtml上に要素が追加できていないのでしょうか？また、追加できていない場合はどのようにして追加したらいいのでしょうか？

退会済みユーザー

2020/04/19 07:46

ありがとうございました！また、idを一意に決めるという点も指摘していただいてありがとうございます！

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