質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1867閲覧

Javascript アロー関数でエラーが出ます

mikeikeikename

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/03 03:18

前提・実現したいこと

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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

javascript

1const deleteElement = (e) => { 2 const tableTag = e.target.closest('tr'); 3 ・・・ 4}

投稿2020/07/03 03:26

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/03 03:27

アロー関数のthisは概ねwindowを指すのでthisをclosestできません (書き方にもよりますが・・・)
mikeikeikename

2020/07/03 03:39

かしこまりました。 この場合ですとtargetがベターということでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問