Q&A
前提・実現したいこと
Todoリストを作っている最中で以下エラーが出ます。
発生している問題・エラーメッセージ
①
main.js:54 Uncaught ReferenceError: Cannot access 'deleteElement' before initialization
②
main.js:56 Uncaught TypeError: this.closest is not a function at HTMLButtonElement.deleteElement (main.js:56)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <title>Todoリスト</title> 9</head> 10 11<body> 12 <h1>Todoリスト</h1> 13 <p> 14 <input type="radio" name="status" value="1" checked="checked">全て 15 <input type="radio" name="status" value="2">作業中 16 <input type="radio" name="status" value="3">完了 17 </p> 18 <p></p> 19 <table> 20 <thead> 21 <th>ID</th> 22 <th>コメント</th> 23 <th>状態</th> 24 <th></th> 25 </thead> 26 <tbody class="addTask-target" id="tbody"></tbody> 27 </table> 28 <h2>新規タスクの追加</h2> 29 <input class="addTask-value" type="text" /> 30 <button class="addTask-trigger" type="button">追加</button> 31 <script src="js/main.js"></script> 32</body> 33 34</html>
Javascript
1 2{ 3 document.addEventListener('DOMContentLoaded', () => { 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 //Taskとidを作成 11 const addTask = (task, id, tableItem) => { 12 const idSpanTd = document.createElement('td'); 13 const taskSpanTd = document.createElement('td'); 14 //タスク追加時にtodosにtodoを追加 15 const todo = { 16 task: 'taskSpanTd', 17 status: '作業中' 18 }; 19 todos.push(todo); 20 //要素内のHTML文章を変更する 21 idSpanTd.innerText = id; 22 taskSpanTd.innerText = task; 23 //生成したテーブル要素をブラウザに表示する 24 tableItem.append(idSpanTd); 25 tableItem.append(taskSpanTd); 26 addTaskTarget.append(tableItem); 27 }; 28 29 //Button要素を生成する 30 const addButton = (tableItem, removeButton, createButton) => { 31 const createButtonTd = document.createElement('td'); 32 const removeButtonTd = document.createElement('td'); 33 //要素内のHTML文章を変更する 34 createButton.innerText = '作業中'; 35 removeButton.innerText = '削除'; 36 //生成したテーブル要素をブラウザに表示する 37 tableItem.append(createButtonTd); 38 tableItem.append(removeButtonTd); 39 addTaskTarget.append(tableItem); 40 //生成したbutton要素を生成する 41 createButtonTd.append(createButton); 42 removeButtonTd.append(removeButton); 43 }; 44 45 //追加ボタンをクリックした際にtd要素を追加する処理を行う 46 addTaskTrigger.addEventListener('click', () => { 47 const task = addTaskValue.value; 48 const tableItem = document.createElement('tr'); 49 const removeButton = document.createElement('button'); 50 const createButton = document.createElement('button'); 51 addTask(task, nextId++, tableItem); 52 addButton(tableItem, removeButton, createButton); 53 addTaskValue.value = ''; 54 removeButton.addEventListener('click', deleteElement, false); 55 56 // //削除ボタンを押した時にタスクを削除する 57 const deleteElement = () => { 58 const tableTag = this.closest('tr'); 59 if (tableTag) tableTag.remove(); 60 updateId(); 61 } 62 63 //ボタンを押したら作業中、完了中と変わる 64 createButton.addEventListener('click', () => { 65 if (createButton.textContent === "作業中") { 66 createButton.textContent = "完了"; 67 } else { 68 createButton.textContent = "作業中"; 69 } 70 }); 71 }) 72 73 // 連番 再振り分け 74 const updateId = () => { 75 const tbody = document.getElementsByTagName("tbody")[0]; 76 const taskList = tbody.getElementsByTagName('tr'); 77 nextId = 0; 78 Array.from(taskList, tr => { 79 tr.getElementsByTagName('td')[0].textContent = nextId; 80 nextId++ 81 }); 82 } 83 }); 84}
試したこと
①のエラーに対しては、以下のコードの上に、const deleteElement = () =>{}を配置することで解決出来たのですが、
removeButton.addEventListener('click', deleteElement, false);
次は削除ボタンを押すと②のエラーが出てしまい詰まってしまっております。
アロー関数を使用しない以下の形であればエラーを出さずに実装できるのですが、アロー関数を使った場合の実装方法が分かりません。お手数ですがご指導宜しくお願い致します。
// //削除ボタンを押した時にタスクを削除する function deleteElement (){ const tableTag = this.closest('tr'); if (tableTag) tableTag.remove(); updateId(); }
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
javascript
1const deleteElement = (e) => { 2 const tableTag = e.target.closest('tr'); 3 ・・・ 4}
投稿2020/07/03 03:26
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/03 03:27
2020/07/03 03:39