Q&A
最後の ｝が無いとか？
プログラミング初学者です。
追加ボタンを押した際にTodoリストを追加したいのですが、ボタンを押してもエラーも出ず全く反応しません。このコードで意図した動作になると思ったのですがどこが間違っているでしょうか。初歩的な問題かもしれませんがご教授いただけたら嬉しいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Todoリスト</title> 6 <link rel="stylesheet" href="css/styles.css"> 7</head> 8<body> 9 <h1>Todo リスト</h1> 10 <table> 11 <th> 12 <tr><th>ID</th><th>コメント</th><th>状態</th><th>削除ボタン</th></tr> 13 </th> 14 <tbody class="addTask-target"> 15 <tr><td>0</td><td>aaa</td><td><button>作業中</button></td><td><button>削除</button></td></tr> 16 <tr><td>0</td><td>aaa</td><td><button>作業中</button></td><td><button>削除</button></td></tr> 17 </tbody> 18 </table> 19 <h2>新規タスクの追加</h2> 20 <input type="text" class="addTask-value"> 21 <button class="addTask-trigger">追加</button> 22 23 <script href="js/main.js"></script> 24</body> 25</html>
css
1table { 2 text-align: center; 3} 4 5tbody button { 6 border: 1px solid; 7 border-radius: 2px; 8 background: #f5f5f5; 9 cursor: pointer; 10} 11 12tbody button:hover { 13 background: #dcdcdc; 14} 15 16button { 17 cursor: pointer; 18}
javascript
1'use strict'; 2 3{ 4 const addTasktarget = document.getElementsByClassName('addTask-target') [0]; 5 const addTaskvalue = document.getElementsByClassName('addTask-value') [0]; 6 const addTasktrigger = document.getElementsByClassName('addTask-trigger') [0]; 7 8 function addTask(task) { 9 const tr = document.createElement('tr'); 10 11 // id要素を取得 12 const idTd = document.createElement('td'); 13 idTd.innerText = 0; 14 15 // コメント要素を取得 16 const TaskTd = document.createElement('td'); 17 TaskTd.innerText = task; 18 19 // 状態要素を取得 20 const addButtonTd = document.createElement('td') 21 const addButton = document.createElement('button') 22 addButton.innerText = '作業中'; 23 24 //削除ボタン要素を取得 25 const removeButtonTd = document.createElement('td'); 26 const removeButton = document.createElement('button'); 27 removeButton.innerText = '削除中'; 28 29 removeButton.addEventListener('click',() => { 30 tr.remove; 31 }); 32 33 addButtonTd.appendChild(addButton); 34 removeButtonTd.appendChild(removeButton); 35 36 tr.appendChild(idTd); 37 tr.appendChild(TaskTd); 38 tr.appendChild(addButtonTd); 39 tr.appendChild(removeButtonTd); 40 41 addTasktarget.appendChild(tr); 42 }; 43 44 addTasktrigger.addEventListener('click', () => { 45 const task = addTaskvalue.value; 46 addTask(task); 47 console.log('task'); 48 addTaskvalue.value = ''; 49 50 }); 51} 52
回答1件
0
ベストアンサー
一点のみ修正。
html
1<script src="js/main.js"></script>
投稿2021/02/15 15:36
総合スコア233
あなたの回答
tips
プレビュー
