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

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

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

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

Q&A

解決済

1回答

2412閲覧

Javascript Todoリスト タスクの追加とインデックスの初期化

mikeikeikename

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2020/06/24 02:11

前提・実現したいこと

①Todoリストで、追加ボタンを押すとID(インデックス)、タスク、作業中、削除ボタンの4つがtdタグに順次追加されるようにしたい
②削除ボタンを押したらタスクが消えて、インデックスが初期化されているようにしたい

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

①タスクを追加すると、下に追加されていくのではなく、同じ場所でインデックス番号のみ変わっていく仕様になっている。addTaskとaddButtonのオブジェクトは分けて実装したいです。

②初期化のメドッドを用いているが動作しない

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel ="stylesheet" href="css/style.css"> 7 <title>Todoリスト</title> 8</head> 9<body> 10 <h1>Todoリスト</h1> 11 <p> 12 <input type="radio" name="status" value="1" checked="checked">全て 13 <input type="radio" name="status" value="2">作業中 14 <input type="radio" name="status" value="3">完了 15 </p> 16<p></p> 17 <table> 18 <thead> 19 <th>ID</th> 20 <th>コメント</th> 21 <th>状態</th> 22 <th></th> 23 </thead> 24 <tbody class ="addTask-target"></tbody> 25 </table> 26 <h2>新規タスクの追加</h2> 27 <input class="addTask-value" type="text" /> 28 <button class="addTask-trigger" type="button">追加</button> 29 <script src="js/main.js"></script> 30</body> 31 32</script> 33</html>

Javascript

1 2 { 3 document.addEventListener('DOMContentLoaded', function() { 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 //テーブル要素を生成する td要素を作る 11 const tableItem = document.createElement('tr'); 12 const idSpanTd = document.createElement('td'); 13 const taskSpanTd = document.createElement('td'); 14 const createButtonTd = document.createElement('td'); 15 const removeButtonTd = document.createElement('td'); 16 17 const addTask = (task, id) => { 18 //要素内のHTML文章を変更する 19 idSpanTd.innerText = id; 20 taskSpanTd.innerText = task; 21 //生成したテーブル要素をブラウザに表示する 22 tableItem.append(idSpanTd); 23 tableItem.append(taskSpanTd); 24 addTaskTarget.appendChild(tableItem); 25 return(task,id) 26 }; 27 28 //Button要素を生成する 29 const removeButton = document.createElement('button'); 30 const createButton = document.createElement('button'); 31 32 const addButton = (button) => { 33 //要素内のHTML文章を変更する 34 createButton.innerText = '作業中'; 35 removeButton.innerText = '削除'; 36 //生成したテーブル要素をブラウザに表示する 37 tableItem.append(createButtonTd); 38 tableItem.append(removeButtonTd); 39 addTaskTarget.appendChild(tableItem); 40 //生成したbutton要素を生成する 41 createButtonTd.append(createButton); 42 removeButtonTd.append(removeButton); 43 return(button) 44 }; 45 46 //追加ボタンをクリックした際にタスクを追加する処理を行う 47 addTaskTrigger.addEventListener('click', () => { 48 const task = addTaskValue.value; 49 addTask(task, nextId++); 50 addButton(); 51 addTaskValue.value = ''; 52 }); 53 54 //チェックリスト用オブジェクト 55 const todo = { 56 task: 'taskSpanTd', 57 status: '作業中' 58 }; 59 todos.push(todo); 60 61 removeButton.addEventListener('click', delete_element, false); 62 63 // //削除ボタンを押した時にタスクを削除する 64 function delete_element () { 65 let tabletag = this.closest ('tr'); 66 if (tabletag) 67 tabletag.remove (); 68 } 69 }); 70 }

試したこと

①addTaskとaddButtonにそれぞれ以下の記述が無いためクリックした際に下に追加されないのではないかと思い、以下の要素を関数にしてaddTaskとaddButtonの中に入れましたが、上手く機能せずでした。

//テーブル要素を生成する td要素を作る const tableItem = document.createElement('tr'); const idSpanTd = document.createElement('td'); const taskSpanTd = document.createElement('td'); const createButtonTd = document.createElement('td'); const removeButtonTd = document.createElement('td');

②以下の関数を使用していますが機能せずです。

// インデックスの初期化 // function initialize() { // if(tr) // tr.initialize(); // }; // document.addEventListener("DOMContentLoaded", initialize.bind(this));

お手数ですがご確認宜しくお願い致します。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

①タスクを追加すると、下に追加されていくのではなく、同じ場所でインデックス番号のみ変わっていく仕様になっている。
addTaskとaddButtonのオブジェクトは分けて実装したいです。

同じ場所でインデックス番号のみ変わっていく動作になっている原因は、追加ボタンをクリックした際にtableItemなどに新しく作成した要素が代入されていないからです。
「試したこと」書いているコードは、tableItemなどと名前は同じであるが新たな別の定数を作ってそこに新しく作成した要素を代入するという意味のコードになっています。
単なる代入が行いたい場合は、頭にconstのキーワードはつけてはいけません。
またconstで宣言したものは定数であり代入が行えないので、constではなくletで宣言を行って下さい。

ちなみに、仕様というのは望む動作のことです。意図に反している動作のことは仕様とは呼びません。

②初期化のメドッドを用いているが動作しない

メドッドという言葉はありません。メソッド(Method)です。

また「初期化」とは一体何がしたいのか分かりません。

「試したこと」にtr.initialize()というコードがありますが、trという変数は定義されていませんし、htmlの要素はinitializeというメソッドを持っていないので実行するとエラーになります。

それなりに動くコード:

javascript

1 { 2 document.addEventListener('DOMContentLoaded', function() { 3 const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0]; 4 const addTaskTarget = document.getElementsByClassName('addTask-target')[0]; 5 const addTaskValue = document.getElementsByClassName('addTask-value')[0]; 6 let nextId = 0; 7 const todos = []; 8 9 let tableItem; 10 let idSpanTd; 11 let taskSpanTd; 12 let createButtonTd; 13 let removeButtonTd; 14 15 const addTask = (task, id) => { 16 //要素内のHTML文章を変更する 17 idSpanTd.innerText = id; 18 taskSpanTd.innerText = task; 19 //生成したテーブル要素をブラウザに表示する 20 tableItem.append(idSpanTd); 21 tableItem.append(taskSpanTd); 22 addTaskTarget.appendChild(tableItem); 23 return(task,id) 24 }; 25 26 let removeButton; 27 let createButton; 28 29 const addButton = (button) => { 30 //要素内のHTML文章を変更する 31 createButton.innerText = '作業中'; 32 removeButton.innerText = '削除'; 33 //生成したテーブル要素をブラウザに表示する 34 tableItem.append(createButtonTd); 35 tableItem.append(removeButtonTd); 36 addTaskTarget.appendChild(tableItem); 37 //生成したbutton要素を生成する 38 createButtonTd.append(createButton); 39 removeButtonTd.append(removeButton); 40 return(button) 41 }; 42 43 //追加ボタンをクリックした際にタスクを追加する処理を行う 44 addTaskTrigger.addEventListener('click', () => { 45 //テーブル要素を生成する td要素を作る 46 //Button要素を生成する 47 tableItem = document.createElement('tr'); 48 idSpanTd = document.createElement('td'); 49 taskSpanTd = document.createElement('td'); 50 createButtonTd = document.createElement('td'); 51 removeButtonTd = document.createElement('td'); 52 removeButton = document.createElement('button'); 53 createButton = document.createElement('button'); 54 55 const task = addTaskValue.value; 56 addTask(task, nextId++); 57 addButton(); 58 addTaskValue.value = ''; 59 60 removeButton.addEventListener('click', delete_element, false); 61 62 }); 63 64 //チェックリスト用オブジェクト 65 const todo = { 66 task: 'taskSpanTd', 67 status: '作業中' 68 }; 69 todos.push(todo); 70 71 // //削除ボタンを押した時にタスクを削除する 72 function delete_element () { 73 let tabletag = this.closest ('tr'); 74 if (tabletag) 75 tabletag.remove (); 76 } 77 }); 78 }

投稿2020/06/24 03:35

編集2020/06/24 15:12
ku__ra__ge

総合スコア4524

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

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

mikeikeikename

2020/06/24 15:03

ku__ra__ge様 ご返信遅くなり申し訳ありません。 ご教示ありがとうございます。 思ったように動きませんが、引き続き模索してみます。
ku__ra__ge

2020/06/24 15:13

それなりに動くコードを追記しました。 コードとしては問題が多いですが、差分がわかりやすいように最小限の変更にしてあるので自分の書いたコードと比較してみてください。
mikeikeikename

2020/06/25 08:59

ご丁寧にありがとうございます。 動作する要因を考えながら試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問