前提・実現したいこと

javascriptでto doリストを作っていて、削除機能を作っています。

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

javascriptの36行目にUncaught TypeError: Cannot read property 'addEventListener' of undefinedというerrorが出てしまいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="List.css">
9</head>
10
11
12
13<body>
14<div>
15 <a href="book.html">book list</a>
16</div>
17 <main>
18    <input class="bookText" type="text"/>
19   <button class="bookAdd" type="button">追加</button>
20   
21</main>
22 <ul class="taskAdd">
23   
24 </ul>
25
26
27 <script src="sample.js"></script>
28</body>
29</html>
30```
31
32
33```javascript
34
35const taskAddSystem=document.getElementsByClassName('taskAdd')[0];
36const bookTextSystem=document.getElementsByClassName('bookText')[0];
37const bookAddSystem=document.getElementsByClassName('bookAdd')[0];
38
39
40
41bookAddSystem.addEventListener('click',() =>{
42   
43
44    const newLi=document.createElement('li');
45    newLi.innerHTML=bookTextSystem.value;
46    
47    taskAddSystem.appendChild(newLi);
48
49    const newIn=document.createElement('textarea');
50    newIn.innerHTML=bookTextSystem.value;
51
52    taskAddSystem.appendChild(newIn);
53
54    const removeButton=document.createElement('button');
55    removeButton.innerText='削除';
56    removeButton.className="deleteBook";
57    
58    taskAddSystem.appendChild(removeButton);
59
60    const editButton=document.createElement("button");
61    editButton.innerText='編集';
62
63    taskAddSystem.appendChild(editButton);
64
65}   );
66 
67const bookDeleteSystem =document.getElementsByClassName('deleteBook')[0];
68
69bookDeleteSystem.addEventListener('click',()=>{
70    const deleteLi=document.querySelector("li")
71  　deleteLi.remove();
72    
73});
74```
75
76### 試したこと
77
78getElementByclassmameが定義づけされていないと出るので、定義を変えてみたり、記述の場所を変えたりしましたが全く変化ありませんでした。
79
80### 補足情報（FW/ツールのバージョンなど）
81使っているのは、VSCです。
82初心者質問ですが、ご教授お願いします、

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

回答2件

js
1const bookDeleteSystem =document.getElementsByClassName('deleteBook')[0];

この行が実行されるタイミングでは、class="deleteBook" を持つ要素が存在しないため、bookDeleteSystem が undefined になっています。

bookAddSystem の click イベントリスナの中で、removeButton を作ったときに removeButton.addEventLisetner(...) を実行するのが良いでしょう。

または、イベントのバブリングを利用して document でイベントを見るのが良いです。

js
1document.addEventListener('click', event => {
2  if (event.target.closest('.deleteBook')) {
3    ocument.querySelector('li').remove();
4  }
5});
6

投稿2021/07/08 00:48

int32_t

総合スコア21695

ベストアンサー

追加をクリックしないと削除ボタンが作成されないのに
削除ボタンにクリックイベントを設定しようとしています

sample

//sample.js

javascript
1document.addEventListener('click',e=>{
2  const t=e.target;
3  if(t.closest('.bookAdd')){
4    const newLi=document.createElement('li');
5    document.querySelector('.taskAdd').appendChild(newLi);
6    const value=document.querySelector('.bookText').value;
7    [new Text(value),
8     Object.assign(document.createElement('textarea'),{value}),
9     Object.assign(document.createElement('button'),{className:'deleteBook',textContent:'削除'}),
10     Object.assign(document.createElement('button'),{textContent:'編集'}),
11     ].forEach(x=>newLi.appendChild(x));
12  }
13  t.closest('.deleteBook')?.closest('li').remove();
14});