編集履歴

質問編集履歴

コードを二重で掲載してしまったため修正。

2016/04/26 09:30

投稿

azxsedcvfr

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,63 @@
+###前提・実現したいこと
+簡単なタスクリストを作っています。
+登録ボタンを押すことで、タスクリストに登録されます。
+登録したタスクには優先度セレクトボックスと完了ボタンが付きます。
+３択の優先度セレクトボックスを選ぶことでタスクの色が決まります。
+（今すぐは赤、後では黄、時間があればは青）
+また登録した後もそれぞれのタスクの横についたセレクトボックスの優先度を変更すると
+それに伴い、タスクの色も変わる。（例.今すぐ→後で に変更すると 赤→黄にタスクの色が変わる）
+タスクについた完了ボタンを押すことで
+タスクはタスクリストから完了リストに移動します。
+またこの時セレクトボックスと完了ボタンは削除されます。
+こういった機能のタスクリストを作ろうとしています。
+###発生している問題・エラーメッセージ
+```
+登録したタスクのセレクトボックスの優先度を変更するとタスクの色は変わらず↓下記エラーが出る。
+practice.js:56 Uncaught TypeError: Cannot read property 'style' of undefined
+登録したタスクの完了ボタンを押すとセレクトボックスは削除されず↓下記エラーが出る。
+practice.js:38 Uncaught TypeError: Cannot read property 'removeChild' of undefined
+```
+###該当のソースコード
+```JavaScript
 var TaskRegister = {                                            /*全体まとめ*/
     init: function init() {
@@ -174,244 +234,8 @@
-###前提・実現したいこと
-簡単なタスクリストを作っています。
-登録ボタンを押すことで、タスクリストに登録されます。
-登録したタスクには優先度セレクトボックスと完了ボタンが付きます。
-３択の優先度セレクトボックスを選ぶことでタスクの色が決まります。
-（今すぐは赤、後では黄、時間があればは青）
-また登録した後もそれぞれのタスクの横についたセレクトボックスの優先度を変更すると
-それに伴い、タスクの色も変わる。（例.今すぐ→後で に変更すると 赤→黄にタスクの色が変わる）
-タスクについた完了ボタンを押すことで
-タスクはタスクリストから完了リストに移動します。
-またこの時セレクトボックスと完了ボタンは削除されます。
-こういった機能のタスクリストを作ろうとしています。
-###発生している問題・エラーメッセージ
 ```
-登録したタスクのセレクトボックスの優先度を変更するとタスクの色は変わらず↓下記エラーが出る。
-practice.js:56 Uncaught TypeError: Cannot read property 'style' of undefined
-登録したタスクの完了ボタンを押すとセレクトボックスは削除されず↓下記エラーが出る。
-practice.js:38 Uncaught TypeError: Cannot read property 'removeChild' of undefined
-```
-###該当のソースコード
-```JavaScript
-var TaskRegister = {                                            /*全体まとめ*/
-    init: function init() {
-        var input    = document.getElementById('task');
-        var selector = document.getElementById('priority');
-        var btn      = document.getElementById('registration');
-        btn.addEventListener('click', function (select){
-            var color = Priority.getColor(selector.value);
-            var task  = Task.create(input.value, color);
-            List.addTask(task);
-        });
-    }
-};
-var Task = {                                                   /*登録ボタン関連*/
-    create: function create(text, color) {
-        var item = document.createElement('li');
-        var btn  = Button.create(item);
-        var select = SelectClone.clone();
-        item.innerHTML   = text;
-        item.appendChild(select);
-        item.style.color = color;
-        item.appendChild(btn);
-        return item;
-    }
-};
-var Button = {                                                  /*完了ボタン関連*/
-    create: function create(task, select, item) {
-        var btn = document.createElement('button');
-        btn.innerHTML = '完了';
-        btn.addEventListener('click', function (select) {
-            List.removeTask(task);
-            List.addDone(task);
-            task.removeChild(btn);
-            item.removeChild(select);
-        });
-        return btn;
-    }
-};
-var SelectClone = {                                             /*クローン関連*/
-    clone: function clone (item) {
-        var priority          = document.getElementById("priority");
-        var selectClone       = priority.cloneNode(true);
-        for (var i = 0; i < selectClone.children.length; i++) {
-            if (priority.value === selectClone.children[i].value) {
-              selectClone.children[i].selected = true;
-            }
-        }
-        selectClone.addEventListener("change", function (event, item) {
-            item.style.color = Priority.getColor(event.target.value);
-        });
-        return selectClone;
-    }
-};
-var List = {                                                    /*リスト関連*/
-    addTask: function add(task) {
-        document.getElementById('taskList').appendChild(task);
-    },
-    removeTask: function remove(task) {
-        document.getElementById('taskList').removeChild(task);
-    },
-    addDone: function add(task) {
-        document.getElementById('doneList').appendChild(task);
-    }
-};
-var Priority = {                                               /*優先度の色*/
-    getColor: function getColor(value) {
-        switch ( Number(value) ) {
-            case 1: return '#f62';
-            case 2: return '#fc0';
-            case 3: return '#0af';
-        }
-    }
-};
-window.addEventListener('load', TaskRegister.init);
-```
 ###試したこと