###前提・実現したいこと
簡単なタスクリストを作っています。
登録ボタンを押すことで、タスクリストに登録されます。
登録したタスクには優先度セレクトボックスと完了ボタンが付きます。
3択の優先度セレクトボックスを選ぶことでタスクの色が決まります。
(今すぐは赤、後では黄、時間があればは青)
また登録した後もそれぞれのタスクの横についたセレクトボックスの優先度を変更すると
それに伴い、タスクの色も変わる。(例.今すぐ→後で に変更すると 赤→黄にタスクの色が変わる)
タスクについた完了ボタンを押すことで
タスクはタスクリストから完了リストに移動します。
またこの時セレクトボックスと完了ボタンは削除されます。
こういった機能のタスクリストを作ろうとしています。
###発生している問題・エラーメッセージ
登録したタスクのセレクトボックスの優先度を変更するとタスクの色は変わらず↓下記エラーが出る。 practice.js:56 Uncaught TypeError: Cannot read property 'style' of undefined 登録したタスクの完了ボタンを押すとセレクトボックスは削除されず↓下記エラーが出る。 practice.js:38 Uncaught TypeError: Cannot read property 'removeChild' of undefined
###該当のソースコード
JavaScript
1var TaskRegister = { /*全体まとめ*/ 2 init: function init() { 3 var input = document.getElementById('task'); 4 var selector = document.getElementById('priority'); 5 var btn = document.getElementById('registration'); 6 7 btn.addEventListener('click', function (select){ 8 var color = Priority.getColor(selector.value); 9 var task = Task.create(input.value, color); 10 List.addTask(task); 11 }); 12 } 13}; 14 15var Task = { /*登録ボタン関連*/ 16 create: function create(text, color) { 17 var item = document.createElement('li'); 18 var btn = Button.create(item); 19 var select = SelectClone.clone(); 20 21 item.innerHTML = text; 22 item.appendChild(select); 23 item.style.color = color; 24 item.appendChild(btn); 25 return item; 26 } 27}; 28 29var Button = { /*完了ボタン関連*/ 30 create: function create(task, select, item) { 31 var btn = document.createElement('button'); 32 btn.innerHTML = '完了'; 33 34 btn.addEventListener('click', function (select) { 35 List.removeTask(task); 36 List.addDone(task); 37 task.removeChild(btn); 38 item.removeChild(select); 39 }); 40 return btn; 41 } 42}; 43 44var SelectClone = { /*クローン関連*/ 45 clone: function clone (item) { 46 var priority = document.getElementById("priority"); 47 var selectClone = priority.cloneNode(true); 48 49 for (var i = 0; i < selectClone.children.length; i++) { 50 if (priority.value === selectClone.children[i].value) { 51 selectClone.children[i].selected = true; 52 } 53 } 54 55 selectClone.addEventListener("change", function (event, item) { 56 item.style.color = Priority.getColor(event.target.value); 57 }); 58 return selectClone; 59 } 60}; 61 62var List = { /*リスト関連*/ 63 addTask: function add(task) { 64 document.getElementById('taskList').appendChild(task); 65 }, 66 67 removeTask: function remove(task) { 68 document.getElementById('taskList').removeChild(task); 69 }, 70 71 addDone: function add(task) { 72 document.getElementById('doneList').appendChild(task); 73 } 74}; 75 76 77var Priority = { /*優先度の色*/ 78 getColor: function getColor(value) { 79 switch ( Number(value) ) { 80 case 1: return '#f62'; 81 case 2: return '#fc0'; 82 case 3: return '#0af'; 83 } 84 } 85}; 86 87window.addEventListener('load', TaskRegister.init); 88
###試したこと
引数の設定がうまくいっていないと考え、必要な仮引数の設定を試行錯誤したがうまくいかなったです。
###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
初歩的な問題かと思いますが、ここ数日つまづいています。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー